Interactive-Rating using React + Tailwind + Accessibility
Design comparison
Solution retrospective
Learned about the card flip mechanism and accessibility.
Community feedback
- @TedJenklerPosted 2 months ago
Hi @manishsinghraj,
Nice project! I appreciate how you’ve incorporated ARIA labels—great job on accessibility, and the animation adds a nice touch. Here are a couple of suggestions:
Add Validation for the Button: Consider adding validation to disable the submit button until the user selects a rating. While you’ve handled this by setting a default rating of 0, requiring users to actively choose a rating could enhance the user experience. If no rating is selected, display an error message or alert.
This not only improves user interaction but also ensures that your ratings are more meaningful, as it encourages users to thoughtfully consider their choices.
"Even though it isn't necessary, companies usually invest millions to ensure their users provide thoughtful feedback. Ensuring that a customer either provides accurate information or none at all would make the site more valuable in a real-life scenario."
This would also be a valuable exercise in learning how to disable buttons based on conditions.
Hope these suggestions help!
Best, Teodor
Marked as helpful0@manishsinghrajPosted 2 months ago@TedJenkler Thanks for the suggestions! I had considered requiring a valid rating before moving forward but decided that a default rating of 0 would be acceptable.
Now I agree that adding validation for the button would enhance the user experience and make the ratings more meaningful, and real life scenarios. I appreciate your help! 🙂
1 - @alekseibodeevPosted 2 months ago
Hi, there 👋 Card flip looks really awesome 🌟
A little tip 💡:
- Don't add tab index on non-interactive elements. Users definitely don't want to tab through all text on the page to reach something useful.
Marked as helpful0
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