UI: Fix focus-trap broken by ThemeProvider's display:contents

Base UI ≥1.4.0 switched to an internal tabbable implementation that
uses checkVisibility() for visibility detection. Per spec,
checkVisibility() returns false for display:contents elements (no
generated box). Since ThemeProvider wraps popup elements and uses
display:contents, every element inside the popup was classified as
non-tabbable, completely breaking focus-trap cycling.

Override display:contents to display:block on the ThemeProvider div
when it directly wraps a popup. The popup is position:fixed, so an
extra block wrapper is layout-inert. The rule is unlayered to win
over ThemeProvider's unlayered display:contents.

Affects: Dialog, AlertDialog, Popover, Tooltip, Select.
Made-with: Cursor

Author: ciampo

packages/ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `Dialog`, `AlertDialog`, `Popover`, `Tooltip`, `Select`: Fix broken focus-trap caused by ThemeProvider's `display: contents` and Base UI's `checkVisibility()` ([#XXXXX](https://github.com/WordPress/gutenberg/pull/XXXXX)).
+
 ## 0.11.0 (2026-04-15)
 
 ### Breaking Changes

packages/ui/src/dialog/style.module.css

@@ -1,5 +1,17 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
+/*
+ * Base UI ≥1.4.0 uses checkVisibility() to detect tabbable elements.
+ * checkVisibility() returns false for display:contents (no generated box),
+ * which breaks the focus-trap when ThemeProvider wraps the popup.
+ *
+ * This rule must be unlayered to override ThemeProvider's unlayered
+ * display:contents.
+ */
+[data-wpds-theme-provider-id]:has(> .popup) {
+	display: block;
+}
+
 @layer wp-ui-components {
 	.backdrop {
 		position: fixed;

packages/ui/src/popover/style.module.css

@@ -1,5 +1,17 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
+/*
+ * Base UI ≥1.4.0 uses checkVisibility() to detect tabbable elements.
+ * checkVisibility() returns false for display:contents (no generated box),
+ * which breaks the focus-trap when ThemeProvider wraps the popup.
+ *
+ * This rule must be unlayered to override ThemeProvider's unlayered
+ * display:contents.
+ */
+[data-wpds-theme-provider-id]:has(> .popup) {
+	display: block;
+}
+
 @layer wp-ui-components {
 	.positioner {
 		z-index: var(--wp-ui-popover-z-index, initial);

packages/ui/src/tooltip/style.module.css

@@ -1,5 +1,17 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
+/*
+ * Base UI ≥1.4.0 uses checkVisibility() to detect tabbable elements.
+ * checkVisibility() returns false for display:contents (no generated box),
+ * which breaks the focus-trap when ThemeProvider wraps the popup.
+ *
+ * This rule must be unlayered to override ThemeProvider's unlayered
+ * display:contents.
+ */
+[data-wpds-theme-provider-id]:has(> .popup) {
+	display: block;
+}
+
 @layer wp-ui-components {
 	.positioner {
 		z-index: var(--wp-ui-tooltip-z-index, initial);

packages/ui/src/utils/css/item-popup.module.css

@@ -1,5 +1,17 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
+/*
+ * Base UI ≥1.4.0 uses checkVisibility() to detect tabbable elements.
+ * checkVisibility() returns false for display:contents (no generated box),
+ * which breaks the focus-trap when ThemeProvider wraps the popup.
+ *
+ * This rule must be unlayered to override ThemeProvider's unlayered
+ * display:contents.
+ */
+[data-wpds-theme-provider-id]:has(> .popup) {
+	display: block;
+}
+
 @layer wp-ui-utilities {
 	.popup {
 		composes: dropdown-motion from "./dropdown-motion.module.css";