Interactive Rating

Community feedback

• 

  h13meyer•60

  @h13meyerPosted about 1 month ago

  I really like your approach on implementing keyboard navigation. I tried to figure out your shortcuts by myself -- without checking the source code -- and have some thoughts on user experience here:

  • I would expect to select a rating with the corresponding number key
  • I would expect to select a focussed rating by pressing 'Enter' -- maybe this could lead to auto-focus on "Submit"?
  • It is possible to switch to the lesser or higher rating by arrow keys -- this I would not have tried without checking the code -- why can I not navigate through the whole scale by arrow keys but only to the direct neighbour of the current selection? Is this a bug?

  Please don't get me wrong -- these are just thoughts and suggestions :)

  I felt inspired by your use of ARIA roles regarding the radio button group. Further research showed me that apparently it would also be an option to only use semantic HTML as shown here within the last example: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role

  Last but not least some tiny remarks:

  • The hover effect on your 'Submit' button is missing, also the text color should be black
  • The text color of the ratings on hover and select should be black, the background on select should be white

  Have a nice day!

  Marked as helpful

  1

  ---

  

  P

  Vishika•360

  @VishikaPosted about 1 month ago

  @h13meyer thanks for the detailed feedback!

  • I used this w3.org resource as a guideline. The link you posted also suggests the same under the keyboard interactions. I imagine enter ought to be reserved for form submission, they have suggested space bar perhaps as an alternative.
  • You're right that the arrow keys are limited to just one press, this is indeed a bug, thanks for finding it! I noticed what may be an oversight in the specification. Since the item becomes checked as well as the focus shifting for arrow keys, and they suggest only the first option have a tab index, the space bar key event is only really useful to check the first option, and before any arrow key is pressed
  • Also, thank you for also pointing out the hover states
  • I also ended up trying the semantic version, seems like it has most of the features built in! But I wasn't able to get the focus state to work

  I ended up making all the changes, thanks again!

  0