Skip to content

[combobox][popover] Add visually hidden close button support with improved modal focus trapping#4084

Merged
atomiks merged 2 commits intomui:masterfrom
atomiks:codex/issue-2722-close-parts
Mar 11, 2026
Merged

[combobox][popover] Add visually hidden close button support with improved modal focus trapping#4084
atomiks merged 2 commits intomui:masterfrom
atomiks:codex/issue-2722-close-parts

Conversation

@atomiks
Copy link
Contributor

@atomiks atomiks commented Feb 13, 2026

Improves modal popup accessibility by ensuring there is a reachable escape hatch for the flows that trap assistive-technology focus.

Closes #2722
Closes #3693
Closes #4096

Changes in this PR:

  • Popover now traps focus when modal is enabled and a Popover.Close is rendered inside Popover.Popup
  • Combobox and Autocomplete now render an internal dismiss button after the popup whenever the popup is modal to assistive technology
  • The internal combobox dismiss button is tracked as part of the popup subtree by FloatingFocusManager, even though it is rendered outside the popup element
  • FloatingFocusManager no longer inserts the hidden fallback span after the reference element
  • Relevant combobox and popover coverage was added for modal focus management and dismiss behavior

finalFocus remains the preferred way to restore focus when the trigger itself gets removed.

@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: a8ab7ad

@mui-bot
Copy link

mui-bot commented Feb 13, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+1.02KB(+0.22%) 🔺+403B(+0.27%)

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 a90a690
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69b15646fc94330008e7cacd
😎 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 4 times, most recently 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
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 5, 2026
@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch from 82fa23c to 17cf66c Compare March 9, 2026 06:21
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 9, 2026
@atomiks
Copy link
Contributor Author

atomiks commented Mar 9, 2026

Codex Review

Overview

This patch improves trapped popup accessibility in two places. Popovers only enable trapped modal behavior when a Popover.Close is rendered inside the popup, and comboboxes now render internal hidden dismiss controls before the input and after the popup so touch screen readers can leave the modal flow in either direction.

Findings (None)

No blocking issues found in this patch.

Confidence: 4/5

High confidence from a full branch pass and focused verification of the updated combobox, popover, and focus-manager paths with pnpm test:jsdom ComboboxRoot PopoverClose FloatingFocusManager --no-watch. The remaining risk is device-specific assistive technology behavior, since the key user-facing change here is how touch screen readers discover the hidden dismiss controls.

Notes

  • Since the previous review, the combobox internal dismiss control was narrowed further: it is now an internal span with button semantics, and the generated API artifact for it was removed.
  • The current branch is a single squashed commit on top of master, so this review covers the whole PR diff as it stands today.

@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Mar 9, 2026
@atomiks atomiks changed the title [all components] Add visually hidden close button support with improved modal focus trapping [combobox][popover] Add visually hidden close button support with improved modal focus trapping Mar 9, 2026
@michaldudak
Copy link
Member

I found an issue when testing it with VoiceOver on an iPad: after I go through the whole list of items and arrive at the hidden close button, VoiceOver focus moves to the input right after the close button is announced. This happens just once per open combobox (focusing the close button again works as expected).

@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch 2 times, most recently from 56e0312 to 1d2f2c3 Compare March 11, 2026 09:45
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 11, 2026
@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch from 1d2f2c3 to 5bcd56f Compare March 11, 2026 09:53
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 11, 2026
@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch 2 times, most recently from e533fd7 to b4dd0fe Compare March 11, 2026 10:04
@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch 2 times, most recently from 606e8e7 to eff61d6 Compare March 11, 2026 11:25
@atomiks atomiks force-pushed the codex/issue-2722-close-parts branch from 9d24107 to d825ad5 Compare March 11, 2026 11:31
@atomiks atomiks merged commit bde80e9 into mui:master Mar 11, 2026
22 checks passed
@atomiks atomiks added component: popover Changes related to the popover component. component: combobox Changes related to the combobox component. and removed scope: all components Widespread work has an impact on almost all components. labels Mar 11, 2026
@atomiks atomiks deleted the codex/issue-2722-close-parts branch March 11, 2026 11:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: combobox Changes related to the combobox component. component: popover Changes related to the popover component. 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

3 participants