Skip to content

fix: add aria-sort semantics and live announcements to transactions sort (Closes #731) - #1148

Open
waterWang wants to merge 1 commit into
Stellopay:mainfrom
waterWang:a11y/transactions-sort-aria
Open

fix: add aria-sort semantics and live announcements to transactions sort (Closes #731)#1148
waterWang wants to merge 1 commit into
Stellopay:mainfrom
waterWang:a11y/transactions-sort-aria

Conversation

@waterWang

Copy link
Copy Markdown

Description

Fixes #731 — Add aria-sort semantics and screen-reader sort announcements to components/transactions/sort.tsx.

Changes

sort.tsx (SortControl)

  • Added a visually-hidden aria-live="polite" region that announces the current sort order to screen readers when the user changes it
  • Improved the trigger button's aria-label to include the active sort description (e.g., "Sort transactions. Sorted by Date descending, then by Amount ascending.")
  • Added renderSortDescription() helper to build human-readable descriptions from sort configs

transactions-table.tsx

  • Added sortConfigs prop to TransactionsTablePropsExtended
  • Added getAriaSort() helper to map sort configs to aria-sort values
  • Set aria-sort="ascending" / "descending" / "none" on the Date, Amount, and Status column headers
  • Fixed pre-existing JSX parse error: TableHead function was returning two adjacent elements (<th>...</th> followed by a <>...</> fragment) without a wrapper — added proper closing ); and return ( to separate the helper function from the component's render

transactions-content.tsx

  • Pass sortConfigs to TransactionsTable component

Testing

  • sort.test.tsx — 15 tests passing (added 4 new tests for aria-live region, aria-label with sort info, multi-column announcement, and empty sort announcement)
  • transactions-table.test.tsx — Added 4 new tests for aria-sort behavior on column headers

WCAG 2.1 AA Compliance

  • aria-sort on sortable column headers (Date, Amount, Status)
  • aria-live="polite" announcements for sort changes
  • aria-atomic="true" ensures the full announcement is read
  • role="status" on the live region for correct screen reader behavior
  • ✅ Trigger button has descriptive aria-label including current sort state
  • ✅ Dropdown menu items operable with Enter and Space (inherited from Radix UI DropdownMenu)

…ort (Closes Stellopay#731)

- Add aria-sort attributes (ascending/descending/none) on the Date,
  Amount, and Status column headers based on the active sort config
- Add a visually-hidden aria-live=polite region that announces the
  current sort order to screen readers when it changes
- Improve the sort trigger button aria-label to include the active
  sort description
- Add tests for aria-live announcement, aria-label sort info, and
  aria-sort on table headers
- Fix pre-existing JSX parse error in TableHead function (adjacent
  elements without wrapper)
@vercel

vercel Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

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 aria-sort attributes and screen-reader sort announcements to components/transactions/sort.tsx

1 participant