Interactive-Rating using React + Tailwind + Accessibility

Community feedback

• 

  Teodor Jenkler•4,040

  @TedJenkler

  Posted 11 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

  01

  Marked as helpful
• Account deletedPosted 11 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.

  01

  Marked as helpful