feat: add selectAllLabel prop to TableView for customizing the aria-label of the select all checkbox - #10530
Conversation
… all checkbox's aria-label
zinap-ensemble
changed the title
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
Thanks for getting this started
| * @param state - State of the table, as returned by `useTableState`. | ||
| */ | ||
| export function useTableSelectAllCheckbox<T>(state: TableState<T>): TableSelectAllCheckboxAria { | ||
| export function useTableSelectAllCheckbox<T>( |
There was a problem hiding this comment.
This is already possible in RAC, so I don't think we need any props for the hooks
https://stackblitz.com/edit/nysi3thd?file=src%2FTable.tsx
There was a problem hiding this comment.
yes, RAC already supports this via but v3's TableView renders that checkbox internally with no way for consumers to reach it — that's why I scoped this here.
| * A custom accessibility label for the select all checkbox in the table header. | ||
| * If not provided, defaults to the standard localized "Select All" label. | ||
| */ | ||
| selectAllLabel?: string; |
There was a problem hiding this comment.
I don't think we'll introduce this to TableView in v3, only in S2 and it's already possible in RAC
There was a problem hiding this comment.
we haven't migrated our project to S2 yet, and this came out of an accessibility audit that requires us to fix it in the near future — is there any chance you'd reconsider adding it to v3 too?
Covered by the auto-generated prop table, per review feedback.
LFDanLu
left a comment
LFDanLu
left a comment
There was a problem hiding this comment.
We will reach out separately to the Dequeue team to see if we can reverse this being judged as an accessibility failure, but if we were to end up making a change it would be pointing the checkbox to the table via aria-labelledby
3 participants
Closes #10529
✅ Pull Request Checklist:
📝 Test Instructions:
TableView's select all checkbox (
selectionMode="multiple"selectionStyle="checkbox") has anaria-labelhardcoded 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
selectAllLabelprop toTableViewto 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:
yarn start, open the TableView stories, select "custom select all labeling".aria-labelshould read "Select all items" instead of "Select All".selectAllLabel) — still reads "Select All".🧢 Your Project: