use tabindex="-1" on non-sortable column headers #1291
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for react-data-table-component ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The proposed fix sets the
tabindex="-1"(unfocusable) wherever the "disabled" property is set on the column-sorting functionality.This is an accessibility fix; currently, all column headers on DataTable have
tabindex="0", making them focusable. That's appropriate for interactive components like sortable column headers, but where sorting is disabled, it adds unnecessary keystrokes and disrupts the normal flow of selection on the page (violating WCAG 2.4.3)I've updated the test snapshots for DataTable to reflect these change -- there are 77 cases where what used to have a
tabindex="0"is nowtabindex="-1".Note: This fixes an issue raised in the comments to #1159 but is not a fix for the overall issue the original poster discussed. (They wanted more direct user control over the tabindex for each column; this PR just obviates one potential use-case for that enhancement, and improves on it by enforcing WCAG compliance rather than relying on the component's installer to do so.)