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

[sai6855]

Closes mui/mui-x#18740

found this issue from mui/mui-x#18740

[mui-bot]

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

[sai6855]

taken from joy-ui

material-ui/packages/mui-joy/src/Checkbox/Checkbox.tsx

Lines 331 to 333 in 544079d

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

[ZeeshanTamboli]

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

[mellis481]

@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]

@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]

@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]

@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:

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

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.