⌨ (Admin Portal) NVDA Does Not Notify Users of Table Updates When Using "Filter by" Search on "Classifications" page

[MaddyDaigle]

⌨ Accessibility Issue

When a user types into the "Filter by" search bar on the "Classifications" Admin page, the table below updates dynamically without providing feedback to users of screen readers like NVDA. Users are unaware that their input has triggered changes to the table.

WCAG 2.1 Criteria

4.1.3 Status Messages: Changes in content must be communicated to assistive technologies without requiring focus.
3.3.2 Labels or Instructions: Provide sufficient cues to ensure users understand the impact of their input.

🦋 Expected Behaviour

As the user types in the search bar, NVDA should notify them that the table is being updated in real-time. Alternatively, a submit button could be provided to allow users to control when the update occurs, with clear feedback provided after submission.

🕵️ Details

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

📋 Steps to Reproduce

1. Open the "Classifications" Admin page in Edge.
2. Launch NVDA and navigate to the "Filter by" search bar using the keyboard.
3. Type a keyword into the search bar and observe that the table updates dynamically without any notification or indication.
4. Note the lack of feedback from NVDA about the table changes.

📸 Screenshot

🙋‍♀️ Proposed Solution

Option 1: Use aria-live="polite" to notify users by updating the region.
Option 2: Add a Submit Button
Replace dynamic updates with a submit button, so users explicitly trigger the table update.

Tristan - Let's go with Option 1 something like Option 1.

Instead of using aria-live, we might want to use our announcer hook to announce number of rows in the table when it updates. That may actually be easier in server-side table search, since we can read out whenever a query finishes, since the queries themselves are debounced. With client-side search, we'll want to be careful about debouncing the announcement somehow. Maybe react-table has something for us?

✅ Acceptance Criteria

• NVDA announces that the table is being updated in real-time when the user types in the search bar.
• Feedback about updates is clear and does not require the user to shift focus.
• The search bar and table updates meet WCAG 2.1 standards for status messages and user instructions.