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>