Issue Summary

The sorting functionality is not programmatically identifiable and is not operable via keyboard.

Steps to Reproduce

1. Open the Jira DC instance.
2. Navigate to the header section, expand the "Dashboards" control, and open any dashboard.
3. Navigate to the "Average Age Chart" data table in the main content area.
4. Try to navigate to the sortable column headers using the keyboard (e.g., by pressing the Tab key).
5. Notice that the column headers are not focusable or operable via keyboard.
6. Using a screen reader, navigate to the table headers and observe that no programmatic information (such as roles or sort state) is announced to indicate sorting functionality.

Screen Recording

Sort Functionality.mp4

Actual Results

When users navigate through the table headers such as "Period", "Issues Unresolved", "Total Age", and "Avg. Age" in the "Average Age Chart: Accessibility Test" data table, they observe that the sorting functionality associated with these headers is neither programmatically identifiable nor operable via keyboard.

This occurs because the sortable controls are not implemented using interactive elements such as a <button> within the <th> element, and the aria-sort attribute is missing to convey the current sort state to screen readers.

This made it difficult for keyboard-only and screen reader users to access the sort functionality associated with mentioned table headers.

Expected Results

The sorting functionality should be programmatically identifiable and fully operable using a keyboard.

Apply the following changes:

• Implement interactive sortable controls for the table headers such as "Period", "Issues Unresolved", "Total Age", and "Avg. Age" by embedding a <button> element within each <th> element. This allows the headers to be keyboard operable and programmatically focusable.
• Add the aria-sort attribute to each <th> element to programmatically expose the current sort state (e.g., "ascending", "descending", or "none") to screen readers.
• Update the scripts to dynamically modify the value of the aria-sort attribute based on user interaction, ensuring screen reader users are informed of changes in sort order.

For implementation guidance, refer to the official WAI-ARIA Authoring Practices example for sortable tables.

Code Snippet:

<table>

  <caption>Average Age Chart: Accessibility Test</caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">
        <button>Period</button>
      </th>
      <!-- Update the aria-sort value dynamically based on the current sort state -->
      <th scope="col" aria-sort="none">
        <button>Issues Unresolved</button>
      </th>
      <!-- Add similar headers for "Total Age" and "Avg. Age" with appropriate aria-sort values -->
    </tr>
  </thead>
</table>

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOS Sequoia 15.4.1
Operations - Windows11
Chrome - Version 137.0.7151.41 (Official Build) (64-bit)
Safari- Version 18.4
Firefox- Version 138.0.1 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest