Skip to content

[material-ui][Checkbox] Add aria-checked attribute for indeterminate state in Checkbox component #46497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

sai6855
Copy link
Contributor

@sai6855 sai6855 commented Jul 9, 2025

Closes mui/mui-x#18740

found this issue from mui/mui-x#18740

@mui-bot
Copy link

mui-bot commented Jul 9, 2025

Netlify deploy preview

https://deploy-preview-46497--material-ui.netlify.app/

Bundle size report

Bundle Parsed Size Gzip Size
@mui/material 🔺+31B(+0.01%) 🔺+18B(+0.01%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against ec938ab

@@ -171,6 +171,10 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
: externalInputProps,
{
'data-indeterminate': indeterminate,
...(indeterminate && {
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#values
'aria-checked': 'mixed',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

taken from joy-ui

...(indeterminate && {
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#values
'aria-checked': 'mixed' as const,

@zannager zannager added the component: checkbox This is the name of the generic UI component, not the React module! label Jul 9, 2025
@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui][Checkbox] Add aria-checked attribute for indeterminate state in Checkbox component [material-ui][Checkbox] Add aria-checked attribute for indeterminate state in Checkbox component Jul 11, 2025
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sai6855 Did you test with screen reader on all browsers? Does this also resolve #20476?

@mellis481
Copy link

mellis481 commented Jul 25, 2025

@ZeeshanTamboli Manually testing this seems unnecessary. The change made is to-spec. There isn't a need to validate how screen readers announce input's with type="text" across browsers, right?

@ZeeshanTamboli
Copy link
Member

@ZeeshanTamboli The change made is to-spec.

Yes, but we should always test any changes made to code.

There isn't a need to validate how screen readers announce input's with type="text" across browsers, right?

This isn't a common case like type="text". As per discussions in #20476, there seems to be inconsistencies across browsers/screen readers. I wanted to make sure if it's resolved.

@mellis481
Copy link

@sai6855 Are you in a position to share the results of Tree View interactions with your change using a screen reader? The change you've made is extremely valuable (thanks for doing it!) and it would be great to have the maintainers sign-off on merging it.

@mellis481
Copy link

mellis481 commented Jul 29, 2025

@ZeeshanTamboli Thank you for pushing for this to be manually tested. My apologies for suggesting otherwise.

I was just able to manually test @sai6855's PR and found it's not working as expected. With his changes, an indeterminate node is not announced as half-checked:

1

It looks it's actually the <li role="treeitem /> element that needs the aria-checked="mixed" added to it to announce correctly:
2

In fact, adding aria-checked="mixed" to the <input type="checkbox" /> had no effect (at least with NVDA). This is probably why many tree view libraries don't use an actual <input type="checkbox" /> element to represent the checkbox, but rather a styled span/div.

@ZeeshanTamboli: If @sai6855 is able to fix his PR, that'd be great. If he isn't/doesn't, I can submit a new PR, but let me know if the only desired update is to set aria-checked="mixed" to the <li role="treeitem /> element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: checkbox This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[tree view] checkbox indeterminate state missing aria-checked="mixed" for accessibility
5 participants