Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Jan 15, 2022. It is now read-only.

Conversation

@jasonblanchard
Copy link
Contributor

In general, really happy with the a11y features of this component so far.

I noticed that the tabindex="0" + role="button" attributes on <th> elements is working really inconsistently across browsers and screen readers to trigger sorting from the keyboard. Also, tab focus + hitting enter doesn't work at all when the screen reader is turned off, which isn't necessarily an a11y concern, but a little surprising given that it can receive tab focus like buttons and links.

This implements an onKeyDown handler in the <Thead> component that triggers this.props.onSort when the key pressed is the enter key. I was able to reuse the existing behavior from handleClickTh in addition to checking which key was pressed.

This solution works across browsers with or without a screen reader, which I think is an overall improvement to the interface.

@glittershark
Copy link
Owner

oh, sweet! thanks!

glittershark added a commit that referenced this pull request Mar 1, 2016
Adds on onKeyDown handler to Th to sort on enter
@glittershark glittershark merged commit 776c292 into glittershark:master Mar 1, 2016
@jasonblanchard
Copy link
Contributor Author

👍 !

glittershark added a commit that referenced this pull request Mar 1, 2016
+ Add onKeyDown handler to Th to allow screen readers and other browsers
  to sort on a press of Enter (#248)
@glittershark
Copy link
Owner

Just pushed version 0.12.4 with this change

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants