Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility: keyboard arrows work in reverse order #15

Closed
dandv opened this issue Feb 1, 2017 · 10 comments

Comments

@dandv
Copy link
Contributor

commented Feb 1, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Feb 1, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 1, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Feb 1, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 1, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 2, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Feb 2, 2017

@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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 17, 2017

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

@szynszyliszys

This comment has been minimized.

Copy link
Collaborator

commented Feb 17, 2017

@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

This comment has been minimized.

Copy link
Collaborator

commented Feb 22, 2017

@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 comment has been minimized.

Copy link
Collaborator

commented Jun 12, 2017

This is fixed in a version 2.0.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.