[Button][Checkbox] Allow receiving focus when disabled

[amok]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

focusableWhenDisabled prop for UnstyledButton has been recently implemented (#32090). The docs claim:

Similarly to the native HTML element, the ButtonUnstyled component can't receive focus when it's disabled. This may reduce its accessibility, as screen readers won't be able to announce the existence and state of the button.

The focusableWhenDisabled prop lets you change this behavior. When this prop is set, the underlying button does not set the disabled prop. Instead, aria-disabled is used, which makes the button focusable.

This should be used whenever the disabled button needs to be read by screen readers.

The same reasoning should be applicable to the MUI Button and Checkbox components

Examples 🌈

See https://mui.com/base/react-button/#focus-on-disabled-buttons

Motivation 🔦

Make <Button disabled /> and <Checkbox disabled> accessible

[mnajdova]

@amok ultimately these components will depend on the useButton hook from @mui/base so they would inherit all features. If you are willing (or someone from the community) to add this prop on these components now, @michaldudak can help with the implementation.

[mnajdova]

Btw, as a workaround, you can add the aria-disabled prop and the Mui-disabled class in order to achieve the experience you want. See https://codesandbox.io/s/broken-cache-5ffve3?file=/demo.tsx

[amok]

@mnajdova thank you for the reply. We're working on making our app compliant with a11y requirements.
It appeared that actually a lot of the MUI's components do not support aria-disabled feature: f.i. Button, Checkbox, AccordionSummary, Chip, IconButton, Radio, Select, Tab, ToggleButton etc. We've implemented wrappers for those components, f.e.:

Also, it appeared that it was "almost impossible" (read "too difficult to spend time on") to do the same for MUI date-picker components. (related report: mui/mui-x/issues/5357)

Is there any time estimate on making the above-mentioned components dependent onuse* hooks? I guess a11y support is required for many other enterprise-grade apps.

[jmca]

Btw, as a workaround, you can add the aria-disabled prop and the Mui-disabled class in order to achieve the experience you want. See https://codesandbox.io/s/broken-cache-5ffve3?file=/demo.tsx

As an additional note, since this won't block tabbing onto the element and clicking the enter key, you might also want to nil out the relevant handlers (like onClick for instance).

[michaldudak]

Work on this has already been started in #27719

[jlin5]

@michaldudak Any updates on this? I noticed that the PR is closed.