Interactive Rating Component with dialog element

Community feedback

• 

  Jo89 😈•380

  @AhmadYousif89Posted over 1 year ago

  Hi there 👋

  Nice work with this challenge, I know that this is a beginner challenge but I just have a couple of notes regarding your solution :

  • user can submit his/her rating even w/o selecting any rate (doesn't make a lot of sense 😅) I would disable the submit button until the user select a rating otherwise leave it disabled.
  • you have - imo - unnecessary div "wrapper-rating", I don't think you need it because you already have a fieldset wrapping the inputs inside, but in this case I would use a grid with 2 rows one for the legend and the second for the inputs distributed in 5 cols, but this is just me 🤷‍♂️
  • you have some accessibility issues like when using the tab key to navigate with the keyboard it's just focus on the 3rd input and the submit button 🤔
  • you don't really need the dialog element you can just render it's content in the div "card" after submitting
  • I would prefer having a clickable button that say for example "close" rather than clicking any where to close the modal and reset the state.

  You have a nice day 👋

  Marked as helpful

  0

  ---

  

  Jelena Jovičić•180

  @je-joPosted over 1 year ago

  @AhmadYousif89 thank you for the valuable feedback!

  • Maybe I misunderstood but I can't replicate this. The button is disabled until the user selects a rating. I have now added back the disabled attribute after the modal is closed, perhaps that's what you meant?
  • Agree, it's a leftover. I changed it as per your suggestion.
  • Again, maybe I misunderstood, but when using the keyboard, when the rating input is focused, you can use the arrow keys to choose a rating, which is the default behaviour for radio input groups, I believe. I agree it may be a bit confusing, so I'll just stick to regular buttons from now, probably.
  • Agree it's not really needed, it's more of a choice.
  • I would prefer the close button too, but I was following the given design which doesn't have any.

  Thanks again, and have a great day!

  0

  

  Jo89 😈•380

  @AhmadYousif89Posted over 1 year ago

  @je-jo

  I see you have fixed all the main issue and this is awesome 👍

  • the submit btn is now disabled until a rating is selected
  • focusing on the inputs with the tab key is working as it should now
  • using the input with the radio type is the correct chose no need for actual btns

  good job 👍

  0