mui-datatables
mui-datatables copied to clipboard
gregnb
Make MUI-datatables WCAG 2.1 compatible
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
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 |
+1 I was working on fixing accessibility bugs on a website my team maintains, and the component has some accessibility bugs - reported by Accessibility Insights - that I don't see options to fix it in the component.
I'm also new to React which makes it even more difficult. The errors that it finds:
