[Button][Checkbox] Allow receiving focus when disabled
See original GitHub issueDuplicates
- 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
Issue Analytics
- State:
- Created a year ago
- Comments:5 (3 by maintainers)
Top GitHub Comments
Work on this has already been started in #27719
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).