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?

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
4 participants