CODEWITHSUNDEEP
reactjsmaterial-uiaccessibilitywavewcag
huzaifa athar
huzaifa athar

Reputation: 21

Accessibility issues coming in MUI components

I am developing a react application using MUI (Core & X) & having issues in WCAG Accessibility. I am using many of their components but having issues in data grid, select and MUI tabs. I am using the following MUI versions:

"@mui/material": "^5.13.5", "@mui/styled-engine-sc": "^5.8.0", "@mui/x-data-grid": "^5.17.8",

Issues found are:

Is this a limitation in MUI or am I doing some thing wrong. Thanks in Advance.

Regards, Huzaifa

Upvotes: 1

Views: 2937

Answers (1)

slugolicious
slugolicious

Reputation: 17553

Your first two errors are the same. The table pagination uses a MUI Select Component and it's causing the error in both scenarios. I used a MUI Data Grid demo page to test the grid.

https://mui.com/x/react-data-grid/pagination/

The coding for the MUI Select is very non-standard:

<input aria-invalid="false" aria-hidden="true" tabindex="-1" 
  class="MuiSelect-nativeInput css-1k3x8v3" value="5">

It has aria-hidden="true" so the <input> will be hidden from screen readers (and other assistive technology) and it has tabindex="-1", which prevents a keyboard user from tabbing to it. So there's no way for a user to get their focus (keyboard or assistive tech) on the <input>. The non-standard coding is fooling the WebAIM WAVE tool. You can ignore the error.

The MUI Select should have display:none on that <input> rather than aria-hidden and tabindex. That would prevent the WAVE error and the example still works as expected. You should file a bug with MUI.

Your third error with MUI Tabs, I could not replicate with https://mui.com/material-ui/react-tabs/. The basic construct of the tabs is:

<div aria-label="basic tabs example" role="tablist">
  <button role="tab" aria-selected="true"  id="simple-tab-0">Item One</button>
  <button role="tab" aria-selected="false" id="simple-tab-1">Item Two</button>
  <button role="tab" aria-selected="false" id="simple-tab-2">Item Three</button>
</div>
...
<div role="tabpanel" id="simple-tabpanel-0" aria-labelledby="simple-tab-0"></div>
<div role="tabpanel" id="simple-tabpanel-1" aria-labelledby="simple-tab-1" hidden=""></div>
<div role="tabpanel" id="simple-tabpanel-2" aria-labelledby="simple-tab-2" hidden=""></div>

Notice that each <button> has an ID ("simple-tab-0", 1, 2) and then later each <div role="tabpanel"> has aria-labelledby pointing to one of the button IDs. That's perfectly valid (which is why the demo page doesn't have any WAVE errors).

The screenshot you posted shows the third <div> with aria-labelledby="simple-tab-2" is being flagged in error. If that happens, that means the <button> with id="simple-tab-2" is missing.

Upvotes: 1

Related Questions