icflorescu / icflorescu/mantine-datatable

Accessibility: Filter ActionIcon missing aria-label

Open
#754 0 comments 0 reactions 0 assignees View on GitHub

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

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.