Intro Component with Signup Form using Flexbox

Community feedback

• 

  Anton•515

  @antaryaPosted about 2 years ago

  Hi 👋,

  Excellent work on this challenge 🚀. It looks fantastic on different screen sizes.

  [1. Regarding your question. You can use a label on top of the input, and when the input is focused, either hide or move the label to a different place. You can check the real example here https://mui.com/material-ui/react-text-field/#basic-textfield; inspect input to see all elements.

  [2. While using the screen reader, the input error is read only once. Later, if you focus on input with an error, there is no indication that the input is invalid. Using aria-invalid and aria-errormessage or aria-describedby might help with it https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage.

  [3. Submit event listener is added for each input; is it intentional?

  [4. When input text is long, and the error icon is visible, the text overlaps with the icon. Increasing padding on the right side will help to fix it.

  I hope this will be helpful.

  Keep up the good work 🚀. Cheers!

  Marked as helpful

  1

  ---

  

  mujpao•70

  @mujpaoPosted about 2 years ago

  @antarya thanks for the comments! I have made some changes.

  Using aria-invalid and aria-errormessage worked for me. However, when focusing on the password input when the error message is displayed, the screen reader doesn't read the error. Is this supposed to happen?

  0

  

  Anton•515

  @antaryaPosted about 2 years ago

  Hi @mujpao,

  Your changes look great 🚀.

  Regarding password input - it looks like the input of the password type is somehow treated differently than the text type. For me, the screen reader also does not say that input is required. As a remedy, you can use aria-describedby for this particular case. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

  Happy coding!

  Marked as helpful

  1