Design comparison
Solution retrospective
Is there any way to implement this design without using the placeholder attribute?
Community feedback
- @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
andaria-errormessage
oraria-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 helpful1@mujpaoPosted about 2 years ago@antarya thanks for the comments! I have made some changes.
Using
aria-invalid
andaria-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@antaryaPosted about 2 years agoHi @mujpao,
Your changes look great 🚀.
Regarding password input - it looks like the input of the
password
type is somehow treated differently than thetext
type. For me, the screen reader also does not say that input is required. As a remedy, you can usearia-describedby
for this particular case. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedbyHappy coding!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord