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

[WIP] EuiTableHeaderCell a11y #1426

Merged
merged 9 commits into from
Jan 23, 2019

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Jan 11, 2019

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

  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios

- [ ] This required updates to Framer X components

Copy link
Contributor

@cjcenizal cjcenizal left a 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.

image

src/components/table/table_header_cell.js Outdated Show resolved Hide resolved
src/components/table/table_header_cell.js Show resolved Hide resolved
Copy link
Contributor

@cjcenizal cjcenizal left a 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.

src/components/table/table_header_cell.js Outdated Show resolved Hide resolved
Copy link
Contributor

@cjcenizal cjcenizal left a 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.

Copy link
Contributor

@chandlerprall chandlerprall left a 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!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants