gregnb / gregnb/mui-datatables

Filter JAWS and NV Access support

Open Beginner friendly
#1,730 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.