[button] Enable buttons to remain focusable when disabled by mj12albert · Pull Request #48613 · mui/material-ui

mj12albert · 2026-06-03T00:20:16Z

Preview: https://deploy-preview-48613--material-ui.netlify.app/material-ui/react-button/#loading-2

In the default styles, the disabled styles suppress the focus styles completely; an alt focus style (added a focus ring for this) is needed in order for "focusable when disabled" to be visually identifiable

I have followed (at least) the PR section of the contributing guide.

code-infra-dashboard · 2026-06-03T00:23:42Z

Deploy preview

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+1.99KB^(+0.38%)	🔺+424B^(+0.28%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/private-theming	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

siriwatknp · 2026-06-18T02:31:12Z

+For disabled `Button` and `IconButton` components that need to trigger a Tooltip, use the `focusableWhenDisabled` prop instead:
+
+```jsx
+<Tooltip title="You don't have permission to do this">
+  <Button disabled focusableWhenDisabled>
+    Disabled
+  </Button>
+</Tooltip>
+```


I think this section should be outside of "Cursor not-allowed" or just link to a new section that explain the focusableWhenDisabled prop.

siriwatknp

Picking this up to continue the work.

Before going further, want to lock the scope of focusableWhenDisabled so we are aligned.

Putting the intended behavior and styling matrix here, so the discussion has one reference.

The idea: a disabled + focusableWhenDisabled element is reachable but inert. It can take focus and receive hover/pointer events, so assistive tech finds it and Tooltip can explain why it is off. But it must still look and act not-actionable.

Behavior

Capability	enabled	disabled (native)	disabled + `focusableWhenDisabled`
In tab order / focusable	✅	❌	✅
Programmatic `.focus()`	✅	❌	✅
Receives hover/pointer events	✅	❌ `pointer-events:none`	✅ `pointer-events:auto`
`Tooltip` on hover	✅	❌ (needs `<span>` wrapper)	✅
`Tooltip` on keyboard focus	✅	❌	✅
`onClick` fires	✅	❌	❌ blocked
Keyboard activate (Enter/Space)	✅	❌	❌ blocked
Event bubbles to ancestor	✅	❌	❌ `stopPropagation`
`onMouseLeave` / `onBlur` fire	✅	❌	✅ (so `Tooltip` can close)
Announced to AT as disabled	—	via `disabled` attr	via `aria-disabled="true"`
Applies to links (`href`/`to`)	—	—	❌ links stay non-focusable

Styling (disabled + `focusableWhenDisabled`)

Visual treatment	Show?	Why
Disabled/dimmed base (`action.disabled`)	✅	it is disabled
Cursor `default`	✅	not actionable, keep production behavior
Hover background / elevation	❌	inert, would falsely signal clickable
Active / pressed style	❌	not actionable
Ripple on press/tap	❌	ripple means "did something"
Focus-visible ring	out of scope this PR	rely on existing focus-visible style, verify it stays visible (WCAG 2.4.7), else separate follow-up

Scope calls

Focus ring: drop it from this PR. The focus-ring CSS variables and outline are a separate concern. Keep this PR to behavior only.
Cursor: keep the production behavior (default). No change.
Hover: prevent Material UI built-in hover styles when disabled. The :hover:not(.Mui-disabled) approach is right.

siriwatknp · 2026-06-18T08:05:44Z

+          props: { focusableWhenDisabled: true },
+          style: {
+            [`&.${buttonClasses.disabled}.${buttonClasses.focusVisible}`]: {
+              outline: '2px solid var(--Button-focusRingColor)',


Is there a reason to add the focus ring here? --Button-focusRingColor plus outline looks like a separate focus-ring effort, not part of the disabled-focusable behavior.

Please drop it from this PR and keep Button scoped to behavior.

Two follow-ons once it is gone:

likely can drop the focusableWhenDisabled ownerState and shouldForwardProp plumbing in the styled root too.

please confirm a disabled-focusable button still shows a visible focus indicator from the existing focus-visible style. If not, that is a separate accessibility follow-up, not a reason to add a ring system here.

siriwatknp · 2026-06-18T08:05:44Z

+        props: { focusableWhenDisabled: true },
+        style: {
+          [`&.${iconButtonClasses.disabled}.${buttonBaseClasses.focusVisible}`]: {
+            outline: '2px solid var(--IconButton-focusRingColor)',


Same as Button — please drop --IconButton-focusRingColor and the outline from this PR. Separate concern, keep IconButton scoped to behavior.

siriwatknp · 2026-06-18T08:05:44Z

+        // Backward compatibility: `preventDefault()` inside `onClose` used to stop later
+        // Snackbars from handling the same Escape event. Preserve that documented behavior
+        // without letting unrelated, pre-existing `defaultPrevented` values suppress Snackbar.
+        if (!defaultPreventedBeforeClose && nativeEvent.defaultPrevented) {


I think this misses the already-prevented case. When Escape reaches this listener already defaultPrevented (a focused child prevented it), defaultPreventedBeforeClose is already true, so the first Snackbar onClose calling preventDefault() cannot set defaultMuiPrevented.

From what I traced, with multiple open Snackbars they all close instead of one-at-a-time.

Please add a regression test for the pre-prevented + multi-snackbar case.

mj12albert · 2026-06-18T12:16:17Z

Is there a reason to add the focus ring here?

I was trying to do it lightly here (this was before you started the theme-level focus ring config) because just opening up the focusableWhenDisabled prop without providing any styling means that the "focused when disabled" state has no visual indication, since the disabled styling suppresses the focus style completely.

Originally I added the focus ring only in a few demos, but it doesn't seem like a good DX for this feature to require users to add their own styles in order to be fully functional

please confirm a disabled-focusable button still shows a visible focus indicator from the existing focus-visible style

The disabled style "grays out" the whole button, so it's impossible for both these styles to coexist without some explicit design change/a new visual affordance:

Maybe we should try to do the library/theme-level focus ring first, WDYT? @siriwatknp @silviuaavram

mj12albert added type: new feature Expand the scope of the product to solve a new problem. scope: icon button Changes related to the icon button. scope: button Changes related to the button. labels Jun 3, 2026

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 4, 2026

mayank99 mentioned this pull request Jun 4, 2026

[docs] update Tooltip "disabled elements" section #48623

Closed

1 task

mj12albert force-pushed the button-focusable-when-disabled branch from af55452 to 4cf24e7 Compare June 8, 2026 15:00

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 8, 2026

mj12albert mentioned this pull request Jun 10, 2026

[ButtonBase] Add theme.focusRing for keyboard focus ring #48647

Draft

mj12albert force-pushed the button-focusable-when-disabled branch from 4cf24e7 to e18f541 Compare June 11, 2026 15:53

This was referenced Jun 17, 2026

Accessibility of Tooltip with disabled items #33182

Open

[ButtonBase] Add focusableWhenDisabled prop #48680

Closed

mj12albert marked this pull request as ready for review June 17, 2026 11:50

mj12albert requested review from silviuaavram and siriwatknp June 17, 2026 11:53

mj12albert mentioned this pull request Jun 17, 2026

[tooltip] Improve support for disabled button triggers #48622

Open

1 task

siriwatknp reviewed Jun 18, 2026

View reviewed changes

mj12albert added 5 commits June 18, 2026 20:22

expose focusableWhenDisabled

28cadb2

fix snackbar escape

013c39f

update docs

7438078

add focus ring

09a1313

fix snackbar and polish comments

7854857

mj12albert force-pushed the button-focusable-when-disabled branch from e18f541 to 7854857 Compare June 18, 2026 12:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[button] Enable buttons to remain focusable when disabled#48613

[button] Enable buttons to remain focusable when disabled#48613
mj12albert wants to merge 5 commits into
mui:masterfrom
mj12albert:button-focusable-when-disabled

mj12albert commented Jun 3, 2026 •

edited

Loading

Uh oh!

code-infra-dashboard Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

siriwatknp Jun 18, 2026 •

edited

Loading

Uh oh!

siriwatknp left a comment

Uh oh!

siriwatknp Jun 18, 2026

Uh oh!

siriwatknp Jun 18, 2026

Uh oh!

siriwatknp Jun 18, 2026

Uh oh!

mj12albert Jun 18, 2026

Uh oh!

mj12albert commented Jun 18, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

mj12albert commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

code-infra-dashboard Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Bundle size

Uh oh!

siriwatknp Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Behavior

Styling (disabled + focusableWhenDisabled)

Scope calls

Uh oh!

siriwatknp Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mj12albert commented Jun 3, 2026 •

edited

Loading

code-infra-dashboard Bot commented Jun 3, 2026 •

edited

Loading

siriwatknp Jun 18, 2026 •

edited

Loading

Styling (disabled + `focusableWhenDisabled`)

mj12albert commented Jun 18, 2026 •

edited

Loading