Accessibility: keyboard arrows work in reverse order

[dandv]

As I mentioned on Lea's blog, when pressing the left/right arrows with the star rating control focused, the focus moves in the opposite direction: pressing the right arrow moves the focus to the left, and the other way around.

[szynszyliszys]

Hi @dandv I know this is an issue. There were trials to change it (both mine and contributors'), but the cost of fixing it was always greater than the gain here: ##12.

If you have a good idea how that could be fixed without breaking the rest of the functionality (tabbing was the issue usually), then I can consider looking into that.

Without a precise solution proposal I am reluctant to pick up yet another fight with this because:

1. People with vision impairment, who are using screen readers, hear that they are decreasing the rating (the rates go in descending order in markup) so it is still quite clear what is going on. Might be just a bit confusing at first, but is bearable. They also are unable to see the weird behaviour.
2. People who use arrows for conveniance can quickly figure out what is going on and make the changes based on what they see.
3. Up/down arrows work as expected.

[dandv]

Hi Anna, initially I thought this approach solved the problem, but then I noticed that's because it didn't highlight the previous stars on hover.

[szynszyliszys]

I think that feedback on hover is a thing that I would rather keep in the library. Maybe there is a better solution that I am not aware of at the moment. I will keep looking, thank you for taking an interest in this repository. :)

[dandv]

Overall thought: since accessibility is the main differentiator of this widget (it's in the title after all), it might be worth adding some JavaScript for fixing the left/right issue. From MDN:

JavaScript has traditionally had a reputation for being inaccessible to users of assistive technologies such as screen readers, but there are now ways to create dynamic web user interfaces that are accessible to a wide variety of users.

[dandv]

How about this: Unicode characters, no JS, keyboard accessible the "right" way.

Up/down arrows work as expected.

Somehow, it hasn't crossed my mind to try up/down arrows. Only left/right, and Tab/Shift+Tab.

[szynszyliszys]

@dandv in Firefox it still goes backwards. As of Javascript, I tend to prefer CSS only solutions. It makes it easier to pick them up and use for people who are fairly new to front-end development... But on the other hand, parsing the rating result usually requires JS anyway. I will try to look into that.

I checked this with voice over. The arrows are working better, but there are spans instead of labels, so there is no way to find out what is going on. Any reason why you chose spans over labels?

[dandv]

I've just updated the CSS-only star rating to use labels - thoughts?

[szynszyliszys]

@dandv in Firefox it works exactly as my solution, arrows go the other way around. I wonder why it works in Chrome then... Will check that later when I have a moment. Thanks for testing this.

[szynszyliszys]

@dandv I think I solved it. I can't believe this can be so simple and no one thought of this before. Please give me a sanity check on this one: https://jsbin.com/yikeyit/edit?html,css,output

I just don't reverse the order of the radio buttons and use additional input:checked + label selector to choose the last star.

edit: ok, now I see the problem. It doesn't highlight more than one next star. In other case there is a gap. But It is accessible, works perfect and is not hacked. I am thinking about using this in Starability anyway...

[szynszyliszys]

This is fixed in a version 2.0.0.