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

fix(TableHeader): update sortable table header aria description for voice over #7383

Merged
merged 4 commits into from
Dec 3, 2020

Conversation

jnm2377
Copy link
Contributor

@jnm2377 jnm2377 commented Dec 1, 2020

Closes #7369

Changelog

  • removed aria-labels from icons
  • added a hidden label for sortable button, which announces sorting for each header

When tabbing/entering a header this is announced: (description of how to sort, which way it will sort/by which header (name) you are sorting).
Screen Shot 2020-12-01 at 4 09 39 PM

@jnm2377 jnm2377 requested a review from dakahn December 1, 2020 22:33
@jnm2377 jnm2377 requested a review from a team as a code owner December 1, 2020 22:33
@@ -18,24 +18,27 @@ import { sortStates } from './state/sorting';
const { prefix } = settings;

const translationKeys = {
iconDescription: 'carbon.table.header.icon.description',
buttonDescription: 'carbon.table.header.icon.description',
Copy link
Contributor Author

@jnm2377 jnm2377 Dec 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: Tried to change carbon.table.header.icon.description to carbon.table.header.button.description since this label is no longer the icon, but the button. However, I got a warning about the public api, so I left it as is.
Screen Shot 2020-12-01 at 4 34 44 PM

@jnm2377 jnm2377 changed the title fix: update sortable table header aria description for voice over fix(TableHeader): update sortable table header aria description for voice over Dec 1, 2020
@netlify
Copy link

netlify bot commented Dec 1, 2020

✔️ Deploy preview for carbon-elements ready!

🔨 Explore the source changes: d29063d

🔍 Inspect the deploy logs: https://app.netlify.com/sites/carbon-elements/deploys/5fc9292fb911c70008d31f54

😎 Browse the preview: https://deploy-preview-7383--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Dec 1, 2020

✔️ Deploy preview for carbon-components-react ready!

🔨 Explore the source changes: d29063d

🔍 Inspect the deploy logs: https://app.netlify.com/sites/carbon-components-react/deploys/5fc9292f5ce18200080c5e51

😎 Browse the preview: https://deploy-preview-7383--carbon-components-react.netlify.app

Copy link
Contributor

@dakahn dakahn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wonderful! Speaks really well in my tests with JAWS 2020 and NVDA 👏 👏

Also got an all-clear from Accessibility Checker

Copy link
Member

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great, nice work! 🎉 ✅ 👍

@kodiakhq kodiakhq bot merged commit 496e11c into carbon-design-system:master Dec 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Data table sortable headers visual and programmatic labels do not match
3 participants