Skip to content

accessibility: add SortAnnouncer for aria-live sorting updates across tables#389

Closed
onyekachi66 wants to merge 1 commit into
AnchorNet-Org:mainfrom
onyekachi66:main
Closed

accessibility: add SortAnnouncer for aria-live sorting updates across tables#389
onyekachi66 wants to merge 1 commit into
AnchorNet-Org:mainfrom
onyekachi66:main

Conversation

@onyekachi66

Copy link
Copy Markdown
Contributor

Closes #145

Description

This PR improves accessibility for screen-reader users by adding a reusable, visually-hidden SortAnnouncer component that utilizes an aria-live="polite" region. When a user changes the sorting order or cycles back to an unsorted state in the table headers, the live region automatically announces the changes (e.g., "Sorted by Amount, ascending" or "Sorting cleared").

Key Changes

  1. New Component: Created SortAnnouncer.tsx to manage sorting state announcements using a useEffect hook that avoids triggering screen-reader announcements on initial mount.
  2. Table Component Integration:
    • Wired the announcer into AnchorTable.tsx.
    • Wired the announcer into PoolTable.tsx.
    • Wired the announcer into SettlementTable.tsx.
  3. Test Extensions:
    • Added live-region state assertions to AnchorTable.test.tsx.
    • Added live-region state assertions to PoolTable.test.tsx.
    • Added live-region state assertions to SettlementTable.test.tsx.
  4. Test Fix:
    • Corrected a pre-existing failing test assertion in PoolTable.test.tsx where it was expecting "Pools search and refresh" instead of the actual "Pools search" role label, and updated its query scope to search for the sibling Refresh button globally rather than inside the search region.

Verification

All 27 targeted tests across AnchorTable.test.tsx, PoolTable.test.tsx, and SettlementTable.test.tsx pass successfully.

@Jagadeeshftw

Copy link
Copy Markdown
Contributor

Closing — this branch's SortAnnouncer/aria-live accessibility work is already on main via #390. Merging main into this branch produces a zero-diff result, so there's nothing left to merge. Thanks for the contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add an aria-live region announcing sort-order changes on AnchorTable, SettlementTable, and PoolTable

2 participants