[Sort] Sort headers add noise for accessible users when traversing table cells

[fmax32]

Bug, feature request, or proposal:

Bug: Sortable table headers add unnecessary noise for accessibility users when traversing table cells.

What is the expected behavior?

Grid cells are announced as '<column_name>, <cell_value>, <column_number>'.

What is the current behavior?

Grid cells are announced as ''Change Sorting for <column_name>, <cell_value> , <column_number>'.

What are the steps to reproduce?

1. Enable screenreader (for example: VoiceOver on Mac).
2. Review the sorting demo example: https://material.angular.io/components/sort/overview

What is the use-case or motivation for changing an existing behavior?

Reducing the cognitive load for screen-reader users.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 6.*
Material: 6.*
OS: any
Browser: any

Is there anything else we should know?

There is related to a year and 2 days old bug: #6874, which is closed as fixed, but it looks like it was partially fixed for traversing table headers only, but there is still an issue with traversing of table cells.

[jelbourn]

@crisbeto would you be able to take a look at this with NVDA and see if there's something relatively straightforward we could do? Something having to do with aria-sort might be the answer here, but that we'd have to verify on more screen readers.

[crisbeto]

@jelbourn I spent some time playing around with it in NVDA and the only way I could get the aria-sort to be read out was to remove the button inside the th and make the th itself focusable using tabindex="0". The downsides are that it doesn't read out dynamic changes to sorting (the current approach doesn't do it either) and it seems like introducing a tabindex to the th breaks navigation using the arrow keys inside the table.

[jelbourn]

Yeah, that's not ideal. I'll put this on the list for the next time I talk to the a11y team