[mat-sort-header] customize aria-label via an input/api

[Cabbageboy]

Currently, there's no entry for a mat-sort-header button to have customized aria-label.
The default one falls to the id (e.g. id), which doesn't make sense to users when announced.

We hope to make it announce with customized aria-label like 'users sorted by ${id} in direction ${direction}'.

[jelbourn]

@andrewseguin or @crisbeto do you remember why the setting to customize the button's label was removed from the intl class?

[crisbeto]

I think that we deprecated it, because it wasn't necessary anymore after we started adding aria-sort to the headers. It was done in #13297.

[Cabbageboy]

While the problem is that the screenreader would get really confused about the button itself, since it can only announce the header name for the button (and doesn't tell the intention)

[jelbourn]

I'm reasonably certain that the button should still have a label that contains the word "Sort", e.g. "Sort by name". Just having the button with the column header text doesn't sufficiently convey the action that will occur via assistive technology. Based on the spec, having aria-sort="none" is supposed to communicate that a column is currently unsorted but sortable, but none of the screen-readers support this. I tried myself in VoiceOver, ChromeVox, and NVDA, and all three communicate that it's a button, but not what it does (NVDA even just says "Clickable").

Going even further, we should probably add additional text for ascending and descending because VoiceOver announces "sort up" and "sort down", which is objectively terrible (but maybe a lower priority issue since it at least announces something).

[crisbeto]

It's worth noting that the main reason we did #13297 was because the aria-label also caused screen readers to read out the header label while navigating the cells.

[jelbourn]

@Cabbageboy I did some investigation here and it looks like we probably don't want to let people change the label for the button, but there is an issue that it doesn't convey its action. However, adding a description with aria-describedby (hacky prototype) seems to get the job done.

[jelbourn]

PR to resolve this issue as well as we can: #23633

[jelbourn]

Resolved by #23633

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}