-
-
Notifications
You must be signed in to change notification settings - Fork 87
Description
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
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.