Hey there. In terms of accessibility, when you build something interactive (like this is). You must test it with a keyboard. Ideally, test it with a screen reader too, but a keyboard will get you a lot of the way there.
If you try and use this with a keyboard you'll see it doesn't work. It's not possible to focus on the rating values and select one, you can only press the submit button.
You're not that far off. You're using the right element <input type="radio"/>
. But because you've set it to display: none
it becomes inaccessible. You'll need to use a method to hide it visually, but keep it accessible for screen readers and keyboards - here's one way you can do it https://www.a11yproject.com/posts/how-to-hide-content/
In terms of the javascript, the only thing I'd suggest is that you attach your event listener to the form's submit
method, rather than the button's click
. Other than that it looks nice and clean
Marked as helpful
@thomashertog
Posted
@AlexKMarshall
Thanks!
I adjusted the display:none
and made sure it was accessible by keyboard.
I admit that was overlooked in the "final stage" of the challenge.