Open bryans-ashn opened 4 months ago
I verified the accessibility issue with the "Checkmarks" select variant using Axe DevTools. It flags the nested interactive controls which isn't compliant with accessibility standards.
my proposed solution is to modify the Checkbox component's implementation and adopt non-interactive elements for the checkbox representation within the select dropdown instead of using interactive elements (like
Updating the documentation with this corrected approach will help developers implement more accessible interfaces using MUI.
Since this item is closed, will there be no more accessibility fixes to the control when the dropdown is open?
Steps to reproduce
https://mui.com/material-ui/react-select/#checkmarks
Required dependencies: Axe DevTools browser extension
Steps:
select
control within theCharkmarks
exampleScan ALL of my page
withAxe DevTools
Attempted to resolve this issue a few different ways but none of them worked.
Current behavior
Axe DevTools flags each of the nested checkboxes as an issue. "Interactive controls must not be nested".
Expected behavior
Either the MUI documentation should note the charkmarks select variant example is not compliant with accessibility rules or the Checkmarks select variant example code should be compliant.
Context
Our UX designers desire a checkbox nested drop down control because the checkboxes more clearly delineate a selected state over the selection highlighting.
Your environment
``` Chrome 124.0.6367.119 System: OS: Windows 10 10.0.19045 Binaries: Node: 18.19.0 - C:\Program Files\nodejs\node.EXE npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD pnpm: 9.0.6 - C:\Program Files\nodejs\pnpm.CMD Browsers: Chrome: Not Found Edge: Chromium (124.0.2478.67) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.28 => 5.0.0-beta.28 @mui/icons-material: ^5.14.19 => 5.14.19 @mui/material: ^5.15.7 => 5.15.16 @types/react: ^18.2.42 => 18.2.43 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.3.3 => 5.3.3 ```npx @mui/envinfo
Search keywords: checkbox select nested accessibility