icflorescu / icflorescu/mantine-datatable
Accessibility: Filter ActionIcon missing aria-label
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 102
- PR merge metrics
- No merged PRs in 30d
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with package/DataTableHeaderCellFilter.tsx at the ActionIcon, then trace how DataTable.tsx, DataTableHeader.tsx, and DataTableHeaderCell.tsx pass column information to it. Add an accessible name for filtering controls, including the proposed column-based default and optional override, and verify that accessibility scanners no longer report the button as unnamed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100