Skip to content
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

[ButtonUnstyled] Allow receiving focus when disabled #32090

Merged
merged 12 commits into from
Apr 11, 2022

Conversation

michaldudak
Copy link
Member

Added the possibility to receive focus when a button is disabled.
Used this new feature in MenuItemUnstyled, so that disabled items can be styled using the Mui-focusVisible class.

@michaldudak michaldudak added component: button This is the name of the generic UI component, not the React module! component: menu This is the name of the generic UI component, not the React module! new feature New feature or request package: base-ui Specific to @mui/base labels Apr 1, 2022
@michaldudak michaldudak requested a review from a team April 1, 2022 12:39
@mui-bot
Copy link

mui-bot commented Apr 1, 2022

Details of bundle changes

Generated by 🚫 dangerJS against 02af6d7

Copy link
Member

@hbjORbj hbjORbj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me 👍

@michaldudak
Copy link
Member Author

@samuelsycamore I'd appreciate a review of the docs.

* If `true`, allows a disabled button to receive focus.
* @default false
*/
allowFocusWhenDisabled?: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
allowFocusWhenDisabled?: boolean;
focusableWhenDisabled?: boolean;

Maybe, not sure :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sounds better :)

@@ -34,6 +34,21 @@ In addition to HTML elements, you can also use SVGs with the `ButtonUnstyled` co

{{"demo": "UnstyledButtonCustom.js"}}

## Focus of disabled buttons

Similarly to the native `<button>`, the `ButtonUnstyled` component can't receive focus when it's disabled.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe expand on when this would be a good use-cases (for example MenuItem) and why. For example, in some cases, disabled elements that are required for completing a step (or are just generally too important to be missed) should be focusable with TAB key.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I explained how this may be important for accessibility and shared that we use this internally for the menu button. Does it look better for you now?

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small nit looks great otherwise 👍

@michaldudak michaldudak merged commit 0dc8840 into mui:master Apr 11, 2022
@michaldudak michaldudak deleted the button-disabled-focus branch May 12, 2022 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: button This is the name of the generic UI component, not the React module! component: menu This is the name of the generic UI component, not the React module! new feature New feature or request package: base-ui Specific to @mui/base
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants