⌨ Accessibility Issue

Table headers do not provide screen reader users with feedback indicating that the columns are sortable. When navigating to the table headers, users are not informed that sorting functionality is available or when sorting actions occur.

WCAG 2.1 Criteria

1.3.1 Info and Relationships: Ensure that relationships, such as sortable headers, are programmatically determined.
4.1.2 Name, Role, Value: Ensure UI components provide the correct name, role, and state to assistive technologies.
2.4.4 Link Purpose (In Context): Ensure that users understand the purpose of interactive elements like sortable headers.

🦋 Expected Behaviour

When a user navigates to a sortable table header, the screen reader should announce:

• The header’s name.
• That it is sortable.
• The current sort state (e.g., "ascending" or "descending").
• When sorting is activated, the screen reader should announce the new sort state.

🕵️ Details

Operating System: Windows 10
Browser: Edge (latest version at the time of testing)
Assistive Technology: NVDA screen reader (latest version)

📋 Steps to Reproduce

• Open the "Admin Classifications" page in Edge.
• Launch NVDA and navigate to the table headers using the keyboard.
• Attempt to sort a column by activating a header.
• Note the absence of feedback indicating that sorting is possible or has occurred.

📸 Screenshot

🙋‍♀️ Proposed Solution

Use the aria-sort attribute to indicate the sort state.

✅ Acceptance Criteria

• NVDA announces that the table headers are sortable when focused.
• Screen readers announce the new sort state when sorting is triggered.
• Sortable headers meet WCAG 2.1 standards for labeling and dynamic updates.