-
Notifications
You must be signed in to change notification settings - Fork 840
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
[EuiDataGrid] Fix/improve screen reader accessibility for column headers #6034
[EuiDataGrid] Fix/improve screen reader accessibility for column headers #6034
Commits on Jul 7, 2022
-
Improve 'Header actions' button label
- Switch to hint text that an action (clicking, aka enter/space key) is necessary - move to `aria-describedby` over `aria-label` for 2 reasons: 1. to give more pause before announcing the new hint 2. in combo with the `hidden` attribute, this prevents the extra hint text from being announced as part of the column header name when screen reader navigating between cells - requires adding fragment wrapper (turn off whitespace diffs)
Configuration menu - View commit details
-
Copy full SHA for ee6f20f - Browse repository at this point
Copy the full SHA ee6f20fView commit details -
[Setup] Move all sorting-related logic to a separate util
- for easier testing and dev readability purposes + perf improvement - DRY out unnecessary new Set() in favor of sortedColumn & a useMemo() around .find() - update unit tests to use hook helper instead of having to wrap context provider
Configuration menu - View commit details
-
Copy full SHA for 8dfb15c - Browse repository at this point
Copy the full SHA 8dfb15cView commit details -
Move sorting text to
aria-describedby
as well- for better pause/screen reader behavior - for header cells without actions, this can't be in an aria-describedby because VO reads the describedby BEFORE the header, not after :| moving it to a SR only item after the column text appears to work
Configuration menu - View commit details
-
Copy full SHA for 11ac2b9 - Browse repository at this point
Copy the full SHA 11ac2b9View commit details -
- now that we no longer need to set an aria-describedby on the topmost grid parent, this can be just ariaSort instead of ariaProps - add comment documentation for somewhat unintuitive aria-sort behavior - simplify to a nested ternary (fight me irl) - add easier to read boolean flags (which will be used more later)
Configuration menu - View commit details
-
Copy full SHA for f913b0e - Browse repository at this point
Copy the full SHA f913b0eView commit details -
Improve sorting screen reader text
Minor - Make var name a little more explicit - useMemo for perf Major - Fix header cells w/ actions not reading out `aria-sort` (because focus is on the child button, not on the grid parent) by adding a new branching path - Fix sort text not being i18n'ed correctly (requires switching to `EuiI18n`, since hooks can't be called in map callbacks or conditionally :T) - Fix copy to read out 'ascending' and 'descending' fully as words, + add ending period for better screen reader flow
Configuration menu - View commit details
-
Copy full SHA for 2eb051c - Browse repository at this point
Copy the full SHA 2eb051cView commit details -
- Remove `data_grid.test.tsx` mounted unit tests in favor of more fleshed out `data_grid_header_cell.test.tsx` tests
Configuration menu - View commit details
-
Copy full SHA for 5e89fa9 - Browse repository at this point
Copy the full SHA 5e89fa9View commit details -
Configuration menu - View commit details
-
Copy full SHA for 43d6ad0 - Browse repository at this point
Copy the full SHA 43d6ad0View commit details -
Fix data_grid.spec.tsx failure
- textContent now includes hidden describedby text, using a querySelector to specify the text content we want fixes it - typescript was complaining about `data`, not sure why
Configuration menu - View commit details
-
Copy full SHA for a5d2efc - Browse repository at this point
Copy the full SHA a5d2efcView commit details