b-table sortable A11y screen reader announces "Click to sort ..." from aria-label instead of th content

[fl-frontend]

Describe the bug

When using a screen reader the content of the aria-label is announced instead of the text content of the TH element, this makes the context of the table content inaccessible to screenreaders/AT

Steps to reproduce the bug

1. Using a Screenreader Go to https://bootstrap-vue.org/docs/components/table#sorting
2. Navigate to the the b-table sorting example
3. Navigate to the 1st th element in the table
4. Screen reader announces "Click to sort Ascending" but does not announce the text content "Last Name" of the th element.

Expected behavior

Screen reader should announce the text content of the th element "Last Name" as well as the sort actions as otherwise the table content loses context

Versions

Libraries:

• BootstrapVue: 2.1.0

Environment:

• Device: Laptop
• OS: Windows 10
• Browser: Chrome 78 (with Narrator screen reader) Firefox 71 (with NVDA)
• Also tested with tota11y screen reader tool https://khan.github.io/tota11y/
  

Demo link

https://bootstrap-vue.org/docs/components/table/#sorting

Additional context

When the aria-label attribute is added to an element most screen readers announce the content of the aria-label attribute instead of the text content of the element it is applied to, for more info https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute. An alternative could be to add in a span of visually hidden text to describe the sort action

<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">Last Name <span class="sr-only">Click to sort Ascending</span></th>

Or instead of making the table header itself clickable wrap the text in a button which would remove the need to instruct the user to click:

<th role="columnheader" scope="col" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left"><button class="btn btn-link w-100">Last Name <span class="sr-only">Sort by Last Name in ascending order</span></button</th>

[tmorehouse]

Another option, might be to forgo the aria label, if the screen readers do indicate the sort direction (sortability) based on the value of the aria-sort attribute (ascending, descending or none) if hte aria-sort attribute is not present then the column isn't sortable.

I would be hesitant to wrap the content of the header in a button, as some users may have custom headers that include interactive elements which are not allowed inside button elements.

But perhaps adding the sr-only <span> (or <p>) in front of any user header content might suffice?

[fl-frontend]

Have tested with NVDA and aria sort is announced when actioned and when the th is focussed by tabbing. On Windows 10 and don't have JAWS so can't test that but will test with Voiceover on macOS and iOS as soon as I can

[tmorehouse]

OK cool, thanks!

[tmorehouse]

@fl-frontend I've created PR #4488 which switches to an sr-only span in the header cell. You can try it out at:

https://deploy-preview-4488--bootstrap-vue.netlify.com/docs/components/table/#sorting

[fl-frontend]

@tmorehouse works well in firefox with nvda both when the sort action happens and when focussed. Chrome it announces the aria sort on focus but not on the sort action. An additional visually hidden div with an aria-live="polite" attribute similar to the div in the example could work as a belt and braces approach as chrome announces the live region when it updates, Firefox announce both the aria-sort and the live region, which is a little verbose but don't think it's too much.

<div class="sr-only" aria-live="polite" aria-atomic="true">Table sorted by: {{ sortBy }}, sort direction: {{ sortDesc ? 'Descending' : 'Ascending' }}</div>

This could just be added as an implementation note in the docs
Waiting on the keys to the test cupboard, but will update on voiceover on iOS and macOS asap