Checkmark select is failing Axe scan, interactive controls must not be nested

[bryans-ashn]

Steps to reproduce

https://mui.com/material-ui/react-select/#checkmarks

Required dependencies: Axe DevTools browser extension

Steps:

1. Navigate to https://mui.com/material-ui/react-select/#checkmarks
2. Open DevTools for your browser of choice (tested in Chrome 124.0.6367.119)
3. Expand the select control within the Charkmarks example
4. Scan ALL of my page with Axe DevTools

Attempted to resolve this issue a few different ways but none of them worked.

<Checkbox									
	disabled   // this works but the styling defaults to the disabled look
	checked={/* put your checked code here */}
	// tried different combinations of the following but none of these worked
	inputProps={{
		'tabIndex': -1,
		'aria-hidden': true,
		'aria-label': option.name,
		'title': option.name,
	}}
/>

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

npx @mui/envinfo

  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

Search keywords: checkbox select nested accessibility

[yassinmars]

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 or ) within other interactive elements (), or adjust role attributes to bypass the nesting violation. This would preserve user experience while aligning with accessibility guidelines.

Updating the documentation with this corrected approach will help developers implement more accessible interfaces using MUI.