Table: Header announcing twice to the screen reader user and labels are verbose

Issue Summary

When the VoiceOver users navigate the table using CTRL + Option + Left or Right arrow keys, the VoiceOver read the header twice of the table unnecessarily and the labels are too much verbose.

Steps to Reproduce

1. In the page add a table, fill up the details for the table header and other cells and publish the page.
2. Activate the VoiceOver.
3. Interact with any table on the page in the read mode using Ctrl-Opt-Right- and Left-Arrow to navigate across table cells.
4. Observe the table headers content announcing twice with the instructions as well.

Screenshot

Screen recording

Screen Recording 2022-11-01 at 8.37.37 PM.mov

Actual Behaviour

On the confluence page for the added table, the content/text present in the table headers is announced twice to the screen reader user with the instructions as well.

Additionally, the labels for the headers are verbose and announced every time to the screen reader users leading to a frustrating experience.

Hence it would create a confusing experience for the assistive technology user to understand the exact content present in the table content.

Expected Result

The table headers should not be announced redundantly to the screen reader users while navigating through table contents in forms or read mode of screen readers.

Apply following fixes in the code to resolve this issues.

• The <th> elements should not be responsible for sort actions. Instead a native HTML <button> elements should be used within <th> elements which should be responsible for sorting functionality.
• Remove "aria-label", "tabindex", "aria-sort=none", etc attributes from all <th> elements.
• Provide sortable table column headers <th> elements with the aria-sort attribute and ensure its value is either “ascending” or “descending” depending on sort state. And also make sure to update the value as per user interactions.
• Remove aria-live & aria-relevant attributes from <tbody> element.

As a best practice apply following additional fixes.

• Provide sort Information in a non-visual aria-live container & update its contents when table is sorted.
  For Example: "Table sorted by Last Name column in descending order" or "Table sorted by Last Name column in ascending order".
• Add some visual cues such as "up chevron icon ▲" to convey that ascending sort is applied & "down chevron icon ▼" to convey that descending sort is applied. And diamond shaped icon (e.g. ♢) to the header which is not currently sorted, so people with visual impairments can easily distinguish them.
• Provide a visually hidden instruction to provide sort hint to users.
  For Example: "use column header buttons to sort".

Refer to following documents for detailed Information & live examples of sortable tables

https://hello.atlassian.net/wiki/spaces/A11Y/pages/1458768766/Sortable+Tables 

https://codepen.io/atlassian-a11y/pen/mdBmzLJ/fef555ed01190b391c99fc26d896cec5 

https://adrianroselli.com/2021/04/sortable-table-columns.html 

Workaround

Currently, there is no known workaround for this behavior. A workaround will be added here when available