System Dashboard - Assigned to me : sortable table headers are not accessible for keyboard & screen reader users.

Issue Summary

On system dashboard page, in 'Assigned to me' table, the sortable table header elements such as 'T(task)', 'Key', 'Summary' & 'P(priority)', etc are not accessible with keyboard alone & screen reader software.

Tested URL

https://instenv-9109-pfsh.instenv.atl-test.space/secure/Dashboard.jspa

Steps to Reproduce

1. Navigate to Jira dashboard page.
2. Navigate to 'Assigned to me' table inside main region.
3. Navigate to the sortable table header elements such as 'T(task)', 'Key', 'Summary' & 'P(priority)', etc.

Actual Results

While navigating with keyboard alone, when user navigate to the 'Assigned to me' table inside main content, the sortable table header elements such as 'T(task)', 'Key', 'Summary' & 'P(priority)', etc don’t receive keyboard focus. Also the screen reader doesn’t announce when the user activate any column header to sort the table.

This makes keyboard-only & screen reader users difficult to access the table sort functionality effectively.

Expected Results

The sortable table header elements such as 'T(task)', 'Key', 'Summary' & 'P(priority)', etc should receive keyboard focus & should be activated with keyboard enter/space key.

Screen reader should also announce the state when the user activate any column header to sort the table.

Apply the following fixes in the source code.

• Mark the element 'T', 'Key', 'Summary' & 'P', etc inside native <button> element.
• Provide an aria-label="Issue type" to the 'T' button since exiting label isn’t enough for screen reader users.
• Provide an aria-label="Priority" to the 'P' button since exiting label isn’t  be enough for screen reader users.
• Provide aria-sort="descending" to the 'Priority' <th> element since it is sorted descending by default on page load.
• When user activate any column header, then aria-sort attribute should be added to corresponding <th> element dynamically. It should be set to 'ascending' if the column is sorted in ascending order else should be set to 'descending' if the column is sorted in descending order.
• Since aria-sort is not well supported by VoiceOver, as a fallback provide the off-screen instructions such as 'sorted ascending' or 'sorted descending' inside <button> elements.

Refer to following example of Sortable table from W3C.

https://w3c.github.io/aria-practices/examples/table/sortable-table.html

Refer to the following Atlassian standards page on Sortable tables.

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

Screenshot

Workaround

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