-
Notifications
You must be signed in to change notification settings - Fork 843
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
[WIP] EuiTableHeaderCell a11y #1426
Conversation
…f sort behavior and state; update snapshort
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏 Awesome work! I tested locally and I think this is the right direction. I have a few suggestions.
Announcing sort direction changes
Currently, if you change the sort on the column then screen reader won't tell you about the state change. Can we use aria-live
or role="alert"
to announce changes to the sort direction?
Docs discoverability
Can we add sortable: true
to all of the columns in the Sorting example, to make it easier to discover and test this functionality? Currently only a couple of the columns are sortable.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for making that change! It sounds much clearer now via VO. I had one other suggestion/question.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏 Tested locally, looks and sounds great! Thanks again for tackling this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes LGTM (and thanks @cjcenizal for the intricate testing!)
Summary
Addresses #1378.
Uses a combination of
aria-sort
and conditional, visually hidden state descriptions to compliment the cell text for screen readers.Feedback welcomed
Checklist
- [ ] This was checked in mobile- [ ] This was checked in IE11- [ ] This was checked in dark mode- [ ] Any props added have proper autodocs- [ ] Documentation examples were added- [ ] This required updates to Framer X components