gregnb / gregnb/mui-datatables
Filter JAWS and NV Access support
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
Filter headers ARIA compliance
## Expected Behavior
When displaying the filters popup JAWS or NV Access should be able to read the labels for each filter option
## Current Behavior
JAWS and NV Access are unable to read the labels for each filtering option, they just read the content of the field
## Steps to Reproduce (for bugs)
1. Open a page that has a MUI-Datatable with at least a column that you can filter by
2. Enable JAWS or NV Access
3. Click the toolbar filter icon
4. Hear that JAWS or NV Access are unable to read the label of the filter option(s)
You can change this line in the TableFilter.js:
`{column.label}`
To:
`{column.label}`
This change should fix the issue.
## Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 4.11.1 |
| MUI-datatables | 3.7.7 |
| React | 17.0.5 |
| Browser | Firefox, Chrome, Chromium Edge |
| JAWS | 2021.2105.53 |
| NV Access | 2020.4 |
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in TableFilter.js at the InputLabel for each filter option and reproduce the popup with JAWS or NV Access enabled. Done means the assistive technology reads each filter option's label rather than only the field content.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100