ACCESSIBLE Form with React, Typescript, Zod, react-hook-form, SCSS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 11 months ago

  A few things I notice

  • personal data fields must have autocomplete attributes.
  • you can use required instead of aria-required.
  • the errors should be wrapped in an element that's always in the dom and has an aria-live attribute set to "assertive". That's where the error id should go that's referenced in the aria-desciribedby too. Then you conditionally render the error message inside when needed.
  • query type is the legend. You must remove the sr-only legend in this. They are actually breaking the accessibility of this.
  • the message does not belong in a fieldset. It's a single form field with a label that's all. Again, the fieldset and legend are making that inaccessible not accessible.
  • not accessibility related but input names shouldn't include spaces (including on the button but that actually doesn't need a name attribute at all).
  • role alert and aria live should be removed from the errors. You wouldn't ever put both of them on one element as they have related functionality.

  15

  Marked as helpful
• 

  Teodor Jenkler•4,040

  @TedJenkler

  Posted 11 months ago

  Hi again @dev-paulL,

  Nice project! Here are some suggestions to further enhance your work:

  Custom Checkboxes and Radio Buttons: Consider creating custom checkboxes and radio buttons to better align with your design. This will also give you an opportunity to explore ARIA roles and attributes for custom components, rather than relying on the default native ones.

  Validation: Instead of using the required attribute—which can sometimes produce an unsightly default validation message ( The default required mail one so ugly)—use JavaScript validation (such as Zod) for a more polished and visually appealing user experience(Like you have done already*, try hit only g in email and you see what i mean).

  Component Question: I’m curious about the IconSuccessCheck.tsx component. What is it for i suspect its something react form hooks related(glad i chosen formik haha)

  Modular SCSS: For improved code management, even in smaller projects, consider adopting a modular approach with SCSS. Organize your styles into a styles folder with files like main.scss and _variables.scss. This can enhance maintainability and make your code easier to navigate. (Arguably not needed because of the size of the form/project but think its good practice and makes some really fast edits/refactors)

  Keep up the great work!

  Best, Teodor

  11
• 

  Git-Elimman•30

  @Git-Elimman

  Posted 11 months ago

  Please I'm still very new to javascript and I've been stuck with this challenge for a long time now, I need help.

  https://github.com/Git-Elimman/Contact-Form

  00