-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
Conversation
There was a problem hiding this 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 👍
@samuelsycamore I'd appreciate a review of the docs. |
* If `true`, allows a disabled button to receive focus. | ||
* @default false | ||
*/ | ||
allowFocusWhenDisabled?: boolean; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
allowFocusWhenDisabled?: boolean; | |
focusableWhenDisabled?: boolean; |
Maybe, not sure :)
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this 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 👍
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.