Browse projects: sortable table headers are not accessible for keyboard & screen reader users.

Issue Summary

On browse projects page, in table present in main content, the following sortable table header elements are not accessible with keyboard alone & screen reader.

• Project
• Key
• Project type    
• Project lead
• Project category

Issue id: 724732

Steps to Reproduce

1. Navigate to Jira dashboard page.
2. Navigate to the "Projects" menu button in the header section & activate it.
3. Activate "View all projects" link from the menu.
4. Navigate to the sortable table header elements such as 'Project', 'Key', etc inside main content.

Actual Results

While navigating with keyboard alone, when user navigate to the table inside main content, the sortable table header elements such as 'Project', 'Key', 'Project type', 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 'Project', 'Key', 'Project type', 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 'Project', 'Key', 'Project type', etc inside native <button> element..
• Provide aria-sort="ascending" to the 'Project' column <th> element since it is sorted ascending 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 an ARAI live element.

Refer to the following Atlassian standards page on Sortable tables.

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

BACKGROUND

Some people cannot use a mouse due to vision or motor disabilities. Content that can be operated with a mouse must also be made operable with a keyboard. When content is operable through a keyboard, it becomes operable by a variety of assistive technologies such as speech input software, sip-and-puff software, on-screen keyboards, scanning software, and alternate keyboards.

Screenshot

Workaround

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