Skip to content

Accessibility: Filter ActionIcon missing aria-label #754

@pa1kota

Description

@pa1kota

Is your feature request related to a problem? Please describe.
When using the filter property in a DataTableColumn, the filter trigger button (ActionIcon) rendered inside DataTableHeaderCellFilter.tsx has no discernible text or accessible name.
Accessibility scanners such as axe-core, Lighthouse, or Wave report:

Ensure buttons have discernible text
Ensure interactive controls are not nested

Image

Browser: Chrome
Extention: axe devtools.

Describe the solution you'd like
Columns with Filtering enabled should have aria-label or title attribute set. The label could default to something like "Open filter for ", and Developers could optionally override it per column via a prop such as
filterButtonLabel?: string.

Describe alternatives you've considered
None.

Additional context
Here is the reference path which need to be fixed.
DataTable.tsx
└── DataTableHeader.tsx
└── DataTableHeaderCell.tsx
└── DataTableHeaderCellFilter.tsx

Referring to the following code, DataTableHeaderCellFilter.tsx the ActionIcon has no aria-label which is causing the above mentioned accessibility issues.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions