fix(TableHeader): remove sort announcement props as no needed and update aria-sort handling#2291
fix(TableHeader): remove sort announcement props as no needed and update aria-sort handling#2291
Conversation
There was a problem hiding this comment.
Pull request overview
Adjusts the Table sorting announcement behavior so the sort live-region text is not included in the column header’s accessible name (preventing repeated announcements across cells in some screen readers).
Changes:
- Moves the sort announcement live region out of the
TableHeaderrender tree and intodocument.body. - Updates existing Table sort tests to align with the new live-region placement.
- Adds a new test intended to ensure the announcement is not included in the header accessible name / table cells.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
packages/react/src/components/Table/TableHeader.tsx |
Introduces a hook that appends an offscreen role="status" live region to document.body and updates its text as sort state changes. |
packages/react/src/components/Table/index.test.tsx |
Removes icon-location assertions tied to the old DOM structure and adds a new test asserting the live region is outside the header/table. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
chornonoh-vova
left a comment
There was a problem hiding this comment.
Overall looks good, left a couple of minor comments for your consideration.
denysfedorov
left a comment
There was a problem hiding this comment.
LGTM! Just one small minor suggestion about contexts creation
Replace the portal-based sort announcement approach with the simpler fix from PR #2319: remove the Offscreen live region entirely and rely solely on the aria-sort attribute on <th>. This prevents NVDA from repeating the sort announcement text on every cell in the column. - Remove SortAnnouncementPortal and related context from Table/TableContext - Mark sortAscendingAnnouncement/sortDescendingAnnouncement as @deprecated - Update tests to assert on aria-sort instead of live region content
Summary
Fix NVDA screen reader announcing sort state on every table row cell.
Problem:
NVDA was reading "Rule sorted ascending" (or similar) for every cell in a sortable column, not just the column header.
For example:
row 2 RuleRule sorted ascending column 1 link and elements...
row 3 RuleRule sorted ascending column 1 link All page content...
Root cause:
TableHeaderrendered anOffscreenlive region(
role="status" aria-live="polite") inside the sort<button>. Because itwas inside the button, screen readers included the announcement text in the
column header's accessible name. NVDA then repeated that name for every cell
in the column.
Fix:
Removed the
Offscreenlive region entirely. Sort state is nowcommunicated solely via the
aria-sortattribute on<th>, which is thestandard ARIA mechanism and is well-supported in modern screen readers (NVDA, JAWS, VoiceOver).
Changes
packages/react/src/components/Table/TableHeader.tsx— removedOffscreenlive region from inside the sort button; marked
sortAscendingAnnouncementand
sortDescendingAnnouncementprops as@deprecatedfor backwards compatibilitypackages/react/src/components/Table/index.test.tsx— updated three teststo assert on
aria-sortattribute instead of the removed live region contentBefore / After (NVDA)
Before:
row 2 RuleRule sorted ascending column 1 link ...
row 3 RuleRule sorted ascending column 1 link ...
After:
row 1 column 1 sorted ascending Rule button
row 2 First Name column 1 Frank
row 3 First Name column 1 Jimmy
Closes: Walnut #13951