Interactive rating component

Community feedback

• 

  Ayokanmi Adejola•1,150

  @Ayokanmi-Adejola

  Posted 21 days ago

  I've just finished testing your Interactive Rating Component solution, and it's fantastic! You've done a remarkable job bringing the design to life and implementing its core interactivity.

  What I Liked :

  • Exceptional Visual Design: The component looks incredibly polished and is an excellent match for the Frontend Mentor challenge's design specifications. The colors, typography, and spacing are spot-on.
  • Seamless Responsiveness: The component adapts beautifully and flawlessly across all screen sizes, maintaining its clean layout and usability on both desktop and mobile.
  • Smooth State Transition: The animation and display of the "Thank You" state after submission are very well executed, providing clear and immediate feedback to the user.
  • Correct Single Selection: You've successfully implemented the logic for selecting only one rating at a time, and impressively, this works perfectly via both mouse clicks and keyboard navigation (Spacebar/Enter). This is a crucial detail often missed!
  • Clear Focus States: The visual focus indicators for the rating numbers and the submit button are well-defined, making keyboard navigation intuitive.

  ---

  Areas for Improvement :

  1. Accessibility - Semantic HTML for Ratings:

     • Currently, the rating numbers (1-5) are interactive divs. While they function via JavaScript, the most semantic and accessible way to handle a single-choice selection like this is by using native radio buttons (<input type="radio">) within a <fieldset> and <legend>. This approach inherently provides keyboard navigation, grouping, and ARIA states to assistive technologies without extra JavaScript. If styling is a concern, radio buttons can be visually hidden and custom styled.
     • If you prefer to stick with divs for styling flexibility, consider fully implementing the ARIA radio group pattern:
       • The container for ratings should have role="radiogroup".
       • Each rating div should have role="radio", aria-checked="true/false" (dynamically updated), and tabindex="-1" (with JavaScript managing tabindex="0" for the currently checked item for correct group navigation).

  2. Accessibility - Post-Submission Experience:

     • After a rating is submitted and the "Thank You" card appears, the keyboard focus remains on the now-hidden "Submit" button. For screen reader users, it's vital to programmatically move focus to the "Thank You" message itself (e.g., to its <h1> or a div containing it).
     • To ensure the "Thank You" message is announced when it appears, enclose it within an aria-live="polite" region. This tells screen readers to read out the content changes gracefully.

  3. User Experience (UX) - Handling No Rating Selected:

     • When the "Submit" button is clicked without a rating being selected, the component currently transitions to the "Thank You" state, displaying "You selected 0 out of 5." While technically accurate, a more conventional and user-friendly approach for form validation would be to:
       • Prevent the transition to the "Thank You" state.
       • Instead, display a clear, concise error message on the rating component itself (e.g., "Please select a rating to proceed") before allowing submission. This guides the user directly on what to do.

  ---

  In Summary:
  
  This is a really outstanding Interactive Rating Component, Your attention to detail in the design and responsiveness is evident, and it's great that you've handled the single-selection logic so well. Focusing on the semantic HTML for the ratings and refining the post-submission accessibility will elevate this project even further, making it robust and delightful for all users.
  
  Keep up the fantastic work!
  

  10