Skip to content

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

Description

@zinap-ensemble

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 TableViews 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 TableViews 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 TableViews 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 TableViews 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions