Description
Steps to reproduce
Steps to reproduce
- Use MUI TreeView with nodes that have partially selected children (indeterminate state) https://stackblitz.com/run?file=src%2FDemo.tsx.
- Inspect the native
<input type="checkbox">
element in the indeterminate state. - Notice it uses a
data-indeterminate
attribute but does not setaria-checked="mixed"
. - Use a screen reader to verify that the indeterminate state is not announced.
2025-07-08_14-23-13.mp4
Current behavior
- Instead of setting the ARIA state
aria-checked="mixed"
, it uses a customdata-indeterminate
attribute. - Screen readers ignore
data-indeterminate
, so they do not announce the indeterminate state.
Expected behavior
- The checkbox input should have
aria-checked="mixed"
when in the indeterminate state. - This ensures that assistive technologies announce the partial selection properly.
Context
- This behavior breaks WCAG 2.1 Success Criterion 4.1.2 and WAI-ARIA checkbox guidelines. https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
- Fixing this will improve the experience for screen reader users interacting with TreeView checkboxes.
Your environment
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: TreeView, accessibility, aria-check