Invisible input creates accessibility issue

[scottaohara]

In trying to solve issues 21 and 22, an "invisible" input was added to allow for a no-rating option. However, for sighted keyboard users, this creates an issue as there is no indicator that this element has been selected.

For example:
Load up a demo with the markup currently outlined in the readme.

Attempt to tab through the interface with keyboard alone and you will find that there is no focus indicator to give guidance to sighted keyboard users.

I do not have a firm idea of a proper solution that might fit exactly with the design aesthetic you'd like to maintain for this project, but here is one thought I might entertain if I had the time to spend on it myself:

Reveal a text label indicating that there is no current rating when a user has focused on the no-rating input. This text label could be revealed above the stars, like one of those floating label patterns. Regardless, it should be noticeable so that a user can easily see a visible change when focus is on that element, or not.

I hope this provides you with at least an idea of how to fix this accessibility issue with the rating component.

Please let me know if there is anything I could further clarify.

[szynszyliszys]

Hi @scottaohara , thanks for spotting this. Started playing with that and what comes to my mind is adding an empty span that fakes the outline around the stars when the no-rate input is focused. It could look like on the screenshot. I tested this and works fine, doesn't break the functionality. I tried to use no-rating label for that, but there was too much hacking to make it work and not break other styling. If you think this solves your problem and looks good, I can merge that tomorrow.

[scottaohara]

Awesome, I had a similar idea but also wasn't sure how to incorporate it w/out having to add yet another element, or as you said, hacking away at the no-rating label.

Per the outline, I'd recommend making it a pixel thicker and a color that would have better contrast, as the example presented would be difficult for some users to see.

Thanks!