Skip to content

fix(a11y): add aria-label to data table filter inputs (#10397)#10402

Open
cloudyun888 wants to merge 3 commits intoshadcn-ui:mainfrom
cloudyun888:fix/data-table-filter-aria-label-10397
Open

fix(a11y): add aria-label to data table filter inputs (#10397)#10402
cloudyun888 wants to merge 3 commits intoshadcn-ui:mainfrom
cloudyun888:fix/data-table-filter-aria-label-10397

Conversation

@cloudyun888
Copy link
Copy Markdown

Summary

Add aria-label to data table filter <Input> components across all example variants
(Radix, Base, and Tasks) to comply with WCAG 2.1 Level A (4.1.2 Name, Role, Value).

Placeholder text alone is not a valid accessible name. Screen readers would announce
"edit text" with no context that this is a filter control.

Changes

File aria-label
apps/v4/examples/radix/data-table-demo.tsx "Filter emails"
apps/v4/examples/base/data-table-demo.tsx "Filter emails"
apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx "Filter tasks"

Testing

  1. Inspect each data table filter input — confirm aria-label is present
  2. Test with screen reader — confirm filter is announced correctly

Fixes #10397

Add aria-label="Filter emails" to the filter Input to comply with WCAG 2.1 Level A
(4.1.2 Name, Role, Value). Placeholder alone is not a valid accessible name.

Fixes shadcn-ui#10397
Add aria-label="Filter emails" to the filter Input to comply with WCAG 2.1 Level A
(4.1.2 Name, Role, Value). Placeholder alone is not a valid accessible name.

Fixes shadcn-ui#10397
Add aria-label="Filter tasks" to the filter Input to comply with WCAG 2.1 Level A
(4.1.2 Name, Role, Value). Placeholder alone is not a valid accessible name.

Fixes shadcn-ui#10397
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 15, 2026

@cloudyun888 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[a11y]: Data Table filter inputs missing aria-label across all example variants (WCAG 4.1.2)

1 participant