Material-ui: ChromeVox on Google Chrome doesn't announce ascending/descending sorting on <TableSortLabel> button

[ahayes91]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When using ChromeVox as a screenreader on Google Chrome, tabbing through table header buttons should announce if a button sorts a table and the current sorting & direction.

Examples of tables that work with ChromeVox:
https://dequeuniversity.com/library/aria/tables/sf-table-sortable
https://heydon.github.io/react-sortable-table-demo/

Current Behavior 😯

Only the text of the button and "button" is read out, even if that button is being used for sorting.

Steps to Reproduce 🕹

Link: https://material-ui.com/components/tables/#sorting-amp-selecting

1. Turn on ChromeVox extension with Google Chrome.
2. Tab to a sorting button on the table in the demo above (like Calories).
3. Click it and listen to the screenreader.
4. No sorting announcements!

Context 🔦

A11y for ChromeVox :) We want to reuse this table but a lot of our users use ChromeOS and ChromeVox

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Google Chrome | Version 75.0.3770.142 (Official Build) (64-bit) |
| ChromeVox | 53.0.2784.5 |
| MacBook Pro 2018 | macOs Mojave 10.14.5 |

It is also the same on ChromeOS.

[mbrookes]

This seems to be an issue of screen readers not supporting the aria-sort property (which appears to be correctly applied in the Material-UI table).

The two "working" examples use a visually hidden text description of the sort order. One challenge with this approach is l10n (the descriptions will be announced in English), but I imagine that is preferable to no description at all.

[ahayes91]

It is going to be an issue for us alright, so if there's a clever way that MUI can allow us to supply the visually hidden text description (and let us handle the internationalisation), that would work.

[ahayes91]

Also opened a bug for ChromeVox in the meantime: https://bugs.chromium.org/p/chromium/issues/detail?id=987997

[mbrookes]

@ahayes91 Looks like we can fix it in the demo, which will allow you to control the text returned: https://deploy-preview-16767--material-ui.netlify.com/

[ahayes91]

Should there be an announcement on change of the sorting (as opposed to having to navigate away from the button and back to hear the new sorting order)?

[mbrookes]

Should there be an announcement on change of the sorting

@ahayes91 I'm really confused. That's exactly how this was behaving with ChromeVox when I submitted this PR, but testing now in response to your comment, it doesn't seem to work any more.

I wish I'd recorded it, as there's no logical explanation for why it should stop working, but I promise you it was working before. I'll take another look, but if you have any ideas, I'm all ears.

[ahayes91]

🤔 very strange if it was working before. The other solution could be to use a visually hidden aria-live="polite" span that announces the sorting of the table (both the header name and the sort direction).

Do the MUI components get audited by accessibility SMEs at any point?

[mbrookes]

The other solution could be to use a visually hidden aria-live="polite"

Thanks, yes, that would have been my next step if it hadn't apparently been working already.

Do the MUI components get audited by accessibility SMEs at any point?

Sadly not – we depend on members of the community with an interest in accessibility to point out issues when they find them, and do our level best to fix them (which is why I jumped on this one, albeit with limited success). Unfortunately it doesn't seem to be a high priority for many developers.

If you have any ideas as to how we can improve this, we'd love to know!