Interactive-Rating using React + Tailwind + Accessibility

Community feedback

• 

  P

  Teodor Jenkler•3,820

  @TedJenklerPosted 3 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 helpful

  0

  ---

  

  Manish Singh•230

  @manishsinghrajPosted 3 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
• Account deleted

  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 helpful

  0

  ---

  

  Manish Singh•230

  @manishsinghrajPosted 3 months ago

  @alekseibodeev right!! Thanks 👍

  0