Skip to content

feat: add selectAllLabel prop to TableView for customizing the aria-label of the select all checkbox - #10530

Open
zinap-ensemble wants to merge 1 commit into
adobe:mainfrom
zinap-ensemble:fix/select-all-checkbox-label
Open

feat: add selectAllLabel prop to TableView for customizing the aria-label of the select all checkbox#10530
zinap-ensemble wants to merge 1 commit into
adobe:mainfrom
zinap-ensemble:fix/select-all-checkbox-label

Conversation

@zinap-ensemble

Copy link
Copy Markdown

Closes #10529

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices
  • I understand every change in this PR and can explain why it's there.
  • If AI-assisted, I followed our AI contribution guidance and pointed my assistant at CLAUDE.md.

📝 Test Instructions:

TableView's select all checkbox (selectionMode="multiple" selectionStyle="checkbox") has an aria-label hardcoded to the localized "Select All" string, with no way to override it. This is a problem when a page renders multiple TableViews — every select all checkbox announces identically, so screen reader users can't tell them apart (fails WCAG 3.3.2, see #10529).

This PR adds an optional selectAllLabel prop to TableView to override that label. It's opt-in only — the default "Select All"/"Select" behavior is unchanged for existing consumers, so this is non-breaking.

To test:

  1. yarn start, open the TableView stories, select "custom select all labeling".
  2. Inspect the header checkbox — aria-label should read "Select all items" instead of "Select All".
  3. Compare against the "static" story (no selectAllLabel) — still reads "Select All".
  4. With VoiceOver (Cmd+F5) or another screen reader, tab to the checkbox and confirm it announces the custom label.
image

🧢 Your Project:

@zinap-ensemble zinap-ensemble changed the title feat: add selectAllLabel prop to TableView for customizing the select all checkbox's aria-label feat: add selectAllLabel prop to TableView for customizing the aria-label of the select all checkbox Aug 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant