[Button][Checkbox] Allow receiving focus when disabled

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 <button> 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

[michaldudak]

Work on this has already been started in #27719

[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).