gregnb / gregnb/mui-datatables
Make MUI-datatables WCAG 2.1 compatible
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
## Current behaviour
Thank you for this wonderful library. I was just testing this library using WAVE evaluation tool on Google Chrome https://wave.webaim.org/.
What WAVE does is: (taken from their website) "WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content."
When I do the test the result reports an accessibility error for the default MUI-datatable selectable checkbox form control, as it has a missing form label
## Expected Behavior
I do not know how to fix it myself or give you very meaningful info (I'm new to React) but the below is what the report tells me:
### What It Means
A form control does not have a corresponding label.
### Why It Matters
If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.
### How to Fix It
If a text label for a form control is visible, use the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.
## Steps to Reproduce (for bugs)
If you want to reproduce the error please install WAVE evaluation plugin on your browser and use it on a page which has mui-datatables component.
Easiest way is to just open one of your example on code sand box and test using plugin.
## Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 4.10.1 |
| MUI-datatables |3.0.1 |
| React |16.13.1 |
| browser | Chrome |
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by opening an existing mui-datatables example or CodeSandbox and reproducing the selectable-checkbox issue with the WAVE evaluation tool in Chrome. Trace the selectable checkbox component, then verify that the control has an accessible label or equivalent description and that WAVE no longer reports a missing form label.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100