adobe / adobe/react-spectrum

[a11y] TableView select-all checkbox aria-label is hardcoded to "Select All" and not customizable

Open
#10,529 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.