Skip to content

[composite] Always skip natively disabled items during list navigation - #5185

Merged
atomiks merged 3 commits into
mui:masterfrom
atomiks:composite-skip-native-disabled
Jul 10, 2026
Merged

atomiks merged 3 commits into
mui:masterfrom
atomiks:composite-skip-native-disabled

Conversation

@atomiks

@atomiks atomiks commented Jul 8, 2026 •

Copy link
Copy Markdown
Contributor

isListIndexDisabled let a disabledIndices override mark natively disabled elements as enabled. Tabs.List passes an empty disabledIndices so that disabled tabs stay focusable, but that also applied to elements carrying a native disabled attribute, e.g. <Tabs.Tab render={<button disabled />} />. The composite moved its active index onto such a tab and the focus() call silently failed, leaving keyboard navigation stuck: pressing ArrowRight from tab A focused A again, and only the next press reached C.

Natively disabled elements can never receive focus, so isListIndexDisabled now always skips them, regardless of disabledIndices. aria-disabled items are unaffected and remain focusable while disabled (the APG default). Menu and Select pass the same override, so the same applies there; tests cover Tabs and Menu. This also means both APG conventions are now reachable: the disabled prop keeps an item in the focus order, while rendering a natively disabled element removes it.

Closes #5132

@atomiks atomiks added component: tabs Changes related to the tabs component. type: bug It doesn't behave as expected. scope: all components Widespread work has an impact on almost all components. and removed component: tabs Changes related to the tabs component. labels Jul 8, 2026
@pkg-pr-new

pkg-pr-new Bot commented Jul 8, 2026 •

Copy link
Copy Markdown

commit: c2cb668

@code-infra-dashboard

code-infra-dashboard Bot commented Jul 8, 2026 •

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 🔺+51B(+0.01%) 🔺+19B(+0.01%)

Details of bundle changes

Performance

Total duration: 990.04 ms +150.60 ms(+17.9%) | Renders: 78 (+0)

Test Duration Renders
Tabs mount (200 instances) 189.29 ms 🔺+44.60 ms(+30.8%) 4 (+0)
Popover mount (300 instances) 71.18 ms 🔺+25.04 ms(+54.3%) 1 (+0)
Combobox type — 500 items, all stay mounted (type "Row ") 30.46 ms 🔺+11.29 ms(+58.9%) 11 (+0)
Tooltip mount (300 contained roots) 43.50 ms 🔺+10.61 ms(+32.2%) 1 (+0)
Dialog mount (300 instances) 48.92 ms 🔺+9.23 ms(+23.2%) 1 (+0)

…and 1 more (+8 within noise) — details

Metric alarms

Test Metric Change
Tabs mount (200 instances) bench:paint 🔺 +85.22 ms
Popover mount (300 instances) bench:paint 🔺 +37.53 ms
Combobox type — 500 items, all stay mounted (type "Row ") bench:paint#combobox-open 🔺 +24.21 ms
Combobox type — 500 items, all stay mounted (type "Row ") bench:paint 🔺 +24.21 ms
Tooltip mount (300 contained roots) bench:paint 🔺 +14.28 ms
Dialog mount (300 instances) bench:paint 🔺 +15.34 ms
Combobox type — 500 items, narrows to ~11 (type "Row 25") bench:paint#combobox-open 🔺 +12.02 ms
Combobox type — 500 items, narrows to ~11 (type "Row 25") bench:paint 🔺 +12.02 ms

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

@netlify

netlify Bot commented Jul 8, 2026

Copy link
Copy Markdown

✅ Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit fa8eb2b
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a4e17822fc4980007eaf485
😎 Deploy Preview https://deploy-preview-5185--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jul 8, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit c2cb668
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a4e1d0c03811c0008c84bc1
😎 Deploy Preview https://deploy-preview-5185--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@atomiks
atomiks marked this pull request as ready for review July 8, 2026 10:43
@atomiks
atomiks merged commit 70e03c2 into mui:master Jul 10, 2026
23 checks passed
@atomiks
atomiks deleted the composite-skip-native-disabled branch July 10, 2026 08:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: all components Widespread work has an impact on almost all components. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[tabs] Allow disabled tabs to be skipped during keyboard navigation

1 participant