Skip to content

[all components] Add visually hidden close button support with improved modal focus trapping#4084

Open
atomiks wants to merge 1 commit intomui:masterfrom
atomiks:codex/issue-2722-close-parts
Open

[all components] Add visually hidden close button support with improved modal focus trapping#4084
atomiks wants to merge 1 commit intomui:masterfrom
atomiks:codex/issue-2722-close-parts

Conversation

@atomiks
Copy link
Contributor

@atomiks atomiks commented Feb 13, 2026

visuallyHidden is a prop for ergonomics for non-Tailwind use and isn't strictly required; Tailwind already has "sr-only"

Closes #2722
Closes #3693 (for modal popups with close buttons. finalFocus is the preferred way to restore focus somewhere when the trigger gets removed as the current method is quite disorienting to screen readers anyway.)

New close parts:

  • Combobox.Close
  • Menu.Close
  • Select.Close

Focus trap:

  • Popover now traps when modal and a close part is rendered
  • Menu: now traps when modal and Menu.Close exists
  • Select: now traps when modal and Select.Close exists
  • Combobox + Autocomplete: now traps for "input-inside-popup" layout when modal and Combobox.Close exists

Relevant combobox demos updated to use the Close part at the end of the list to escape it

@atomiks atomiks added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: all components Widespread work has an impact on almost all components. labels Feb 13, 2026
@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 13, 2026

commit: 82fa23c

@mui-bot
Copy link

mui-bot commented Feb 13, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+1.65KB(+0.36%) 🔺+522B(+0.36%)

Details of bundle changes


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

@netlify
Copy link

netlify bot commented Feb 13, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 82fa23c
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/699557d9d6cc680008e546a2
😎 Deploy Preview https://deploy-preview-4084--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch 3 times, most recently from 54dd561 to 53a0448 Compare February 18, 2026 06:09
@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch from 53a0448 to 82fa23c Compare February 18, 2026 06:10
@atomiks atomiks marked this pull request as ready for review February 18, 2026 06:14
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: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[dialog] Don't add invisible span element after clicked trigger [popups] Visually hidden close buttons

2 participants

Comments