[a11y] TableView select-all checkbox aria-label is hardcoded to "Select All" and not customizable
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
In `TableView`, when used with `selectionMode="multiple"` `selectionStyle="checkbox"`, the `aria-label` of the select-all checkbox is hardcoded to "Select All" with no way to override it. When multiple `TableView`s appear on one page, every select-all checkbox announces identically, so screen reader users can't tell them apart.
### 🤔 Expected Behavior?
There should be a way to customize the aria-label of the select-all checkbox — e.g. a `selectAllLabel` prop on `TableView`, or a fallback that composes the table's own `aria-label` (e.g. "Select all Event Providers") — so screen reader users can distinguish between select-all checkboxes when multiple tables appear on one page.
### 😯 Current Behavior
When a page renders multiple `TableView`s with `selectionMode="multiple"` `selectionStyle="checkbox"`, every select-all checkbox announces identically as "Select All" — even though each table has its own distinguishing `aria-label`. Fails WCAG 3.3.2 (Labels or Instructions).
### 💁 Possible Solution
Default the aria-label of the select-all checkbox to one built from the table's own `aria-label` (e.g. "Select all " + the table's aria-label), and also expose a way to customize it directly — e.g. a `selectAllLabel` prop on `TableView` (and/or `Table` in react-aria-components) — to override that default when needed.
### 🔦 Context
We have a page with multiple `TableView`s rendered side by side (one per data group), each with `selectionMode="multiple"` `selectionStyle="checkbox"`. An accessibility audit flagged that screen reader users can't distinguish between the "Select All" checkboxes across these tables since they share an identical, non-descriptive aria-label.
### 🖥️ Steps to Reproduce
Render two `TableView`s with `selectionMode="multiple"` `selectionStyle="checkbox"` on the same page, each with a distinct `aria-label`. Inspect the select-all checkbox in each table — both have `aria-label="Select All"`.
### Version
3.47.3
### What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge
### If other, please specify.
_No response_
### What operating system are you using?
macOS Tahoe 26.3
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start at the TableView select-all checkbox implementation and trace how its aria-label is assigned, including how the table's own aria-label is exposed. Verify the change by rendering multiple TableViews with distinct aria-labels and confirm their select-all checkboxes can announce distinct, customizable labels.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100