@wordpress/dom 4.54.1-next.v.202608281122.0 → 4.55.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 4.55.0 (2026-09-10)
+
+### Bug Fixes
+
+-   `focusable.find`: Exclude elements hidden by CSS `visibility` or `content-visibility` while preserving explicitly visible descendants ([#82574](https://github.com/WordPress/gutenberg/pull/82574)).
+
 ## 4.54.0 (2026-08-26)
 
 ### Bug Fixes

package/build/focusable.cjs

@@ -40,6 +40,18 @@ function buildSelector(sequential) {
   ].join(",");
 }
 function isVisible(element) {
+  if (typeof element.checkVisibility === "function") {
+    if (!element.checkVisibility({ visibilityProperty: true })) {
+      return false;
+    }
+  } else {
+    const visibility = element.ownerDocument.defaultView?.getComputedStyle(
+      element
+    ).visibility;
+    if (visibility === "hidden" || visibility === "collapse") {
+      return false;
+    }
+  }
   return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;
 }
 function isValidFocusableArea(element) {

package/build/focusable.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/focusable.js"],
-  "sourcesContent": ["/**\n * References:\n *\n * Focusable:\n *  - https://www.w3.org/TR/html5/editing.html#focus-management\n *\n * Sequential focus navigation:\n *  - https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute\n *\n * Disabled elements:\n *  - https://www.w3.org/TR/html5/disabled-elements.html#disabled-elements\n *\n * getClientRects algorithm (requiring layout box):\n *  - https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface\n *\n * AREA elements associated with an IMG:\n *  - https://w3c.github.io/html/editing.html#data-model\n */\n\n/**\n * Returns a CSS selector used to query for focusable elements.\n *\n * @param {boolean} sequential If set, only query elements that are sequentially\n *                             focusable. Non-interactive elements with a\n *                             negative `tabindex` are focusable but not\n *                             sequentially focusable.\n *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {string} CSS selector.\n */\nfunction buildSelector( sequential ) {\n\treturn [\n\t\tsequential ? '[tabindex]:not([tabindex^=\"-\"])' : '[tabindex]',\n\t\t'a[href]',\n\t\t'button:not([disabled])',\n\t\t'input:not([type=\"hidden\"]):not([disabled])',\n\t\t'select:not([disabled])',\n\t\t'textarea:not([disabled])',\n\t\t'iframe:not([tabindex^=\"-\"])',\n\t\t'object',\n\t\t'embed',\n\t\t'summary',\n\t\t'area[href]',\n\t\t'[contenteditable]:not([contenteditable=false])',\n\t].join( ',' );\n}\n\n/**\n * Returns true if the specified element is visible (i.e. neither display: none\n * nor visibility: hidden).\n *\n * @param {HTMLElement} element DOM element to test.\n *\n * @return {boolean} Whether element is visible.\n */\nfunction isVisible( element ) {\n\treturn (\n\t\telement.offsetWidth > 0 ||\n\t\telement.offsetHeight > 0 ||\n\t\telement.getClientRects().length > 0\n\t);\n}\n\n/**\n * Returns true if the specified area element is a valid focusable element, or\n * false otherwise. Area is only focusable if within a map where a named map\n * referenced by an image somewhere in the document.\n *\n * @param {HTMLAreaElement} element DOM area element to test.\n *\n * @return {boolean} Whether area element is valid for focus.\n */\nfunction isValidFocusableArea( element ) {\n\t/** @type {HTMLMapElement | null} */\n\tconst map = element.closest( 'map[name]' );\n\tif ( ! map ) {\n\t\treturn false;\n\t}\n\n\t/** @type {HTMLImageElement | null} */\n\tconst img = element.ownerDocument.querySelector(\n\t\t'img[usemap=\"#' + map.name + '\"]'\n\t);\n\treturn !! img && isVisible( img );\n}\n\n/**\n * Returns all focusable elements within a given context.\n *\n * @param {Element} context              Element in which to search.\n * @param {Object}  options\n * @param {boolean} [options.sequential] If set, only return elements that are\n *                                       sequentially focusable.\n *                                       Non-interactive elements with a\n *                                       negative `tabindex` are focusable but\n *                                       not sequentially focusable.\n *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {HTMLElement[]} Focusable elements.\n */\nexport function find( context, { sequential = false } = {} ) {\n\t/** @type {NodeListOf<HTMLElement>} */\n\tconst elements = context.querySelectorAll( buildSelector( sequential ) );\n\n\treturn Array.from( elements ).filter( ( element ) => {\n\t\tif ( ! isVisible( element ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Elements inside an inert subtree are not focusable.\n\t\tif ( element.closest( '[inert]' ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst { nodeName } = element;\n\t\tif ( 'AREA' === nodeName ) {\n\t\t\treturn isValidFocusableArea(\n\t\t\t\t/** @type {HTMLAreaElement} */ ( element )\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t} );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BA,SAAS,cAAe,YAAa;AACpC,SAAO;AAAA,IACN,aAAa,oCAAoC;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,KAAM,GAAI;AACb;AAUA,SAAS,UAAW,SAAU;AAC7B,SACC,QAAQ,cAAc,KACtB,QAAQ,eAAe,KACvB,QAAQ,eAAe,EAAE,SAAS;AAEpC;AAWA,SAAS,qBAAsB,SAAU;AAExC,QAAM,MAAM,QAAQ,QAAS,WAAY;AACzC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AAGA,QAAM,MAAM,QAAQ,cAAc;AAAA,IACjC,kBAAkB,IAAI,OAAO;AAAA,EAC9B;AACA,SAAO,CAAC,CAAE,OAAO,UAAW,GAAI;AACjC;AAgBO,SAAS,KAAM,SAAS,EAAE,aAAa,MAAM,IAAI,CAAC,GAAI;AAE5D,QAAM,WAAW,QAAQ,iBAAkB,cAAe,UAAW,CAAE;AAEvE,SAAO,MAAM,KAAM,QAAS,EAAE,OAAQ,CAAE,YAAa;AACpD,QAAK,CAAE,UAAW,OAAQ,GAAI;AAC7B,aAAO;AAAA,IACR;AAGA,QAAK,QAAQ,QAAS,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAEA,UAAM,EAAE,SAAS,IAAI;AACrB,QAAK,WAAW,UAAW;AAC1B,aAAO;AAAA;AAAA,QAC2B;AAAA,MAClC;AAAA,IACD;AAEA,WAAO;AAAA,EACR,CAAE;AACH;",
+  "sourcesContent": ["/**\n * References:\n *\n * Focusable:\n *  - https://www.w3.org/TR/html5/editing.html#focus-management\n *\n * Sequential focus navigation:\n *  - https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute\n *\n * Disabled elements:\n *  - https://www.w3.org/TR/html5/disabled-elements.html#disabled-elements\n *\n * getClientRects algorithm (requiring layout box):\n *  - https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface\n *\n * AREA elements associated with an IMG:\n *  - https://w3c.github.io/html/editing.html#data-model\n */\n\n/**\n * Returns a CSS selector used to query for focusable elements.\n *\n * @param {boolean} sequential If set, only query elements that are sequentially\n *                             focusable. Non-interactive elements with a\n *                             negative `tabindex` are focusable but not\n *                             sequentially focusable.\n *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {string} CSS selector.\n */\nfunction buildSelector( sequential ) {\n\treturn [\n\t\tsequential ? '[tabindex]:not([tabindex^=\"-\"])' : '[tabindex]',\n\t\t'a[href]',\n\t\t'button:not([disabled])',\n\t\t'input:not([type=\"hidden\"]):not([disabled])',\n\t\t'select:not([disabled])',\n\t\t'textarea:not([disabled])',\n\t\t'iframe:not([tabindex^=\"-\"])',\n\t\t'object',\n\t\t'embed',\n\t\t'summary',\n\t\t'area[href]',\n\t\t'[contenteditable]:not([contenteditable=false])',\n\t].join( ',' );\n}\n\n/**\n * Returns true if the specified element has a layout box and is not hidden by\n * CSS visibility or content visibility.\n *\n * @param {HTMLElement} element DOM element to test.\n *\n * @return {boolean} Whether element is visible.\n */\nfunction isVisible( element ) {\n\tif ( typeof element.checkVisibility === 'function' ) {\n\t\tif ( ! element.checkVisibility( { visibilityProperty: true } ) ) {\n\t\t\treturn false;\n\t\t}\n\t} else {\n\t\tconst visibility =\n\t\t\telement.ownerDocument.defaultView?.getComputedStyle(\n\t\t\t\telement\n\t\t\t).visibility;\n\t\tif ( visibility === 'hidden' || visibility === 'collapse' ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\treturn (\n\t\telement.offsetWidth > 0 ||\n\t\telement.offsetHeight > 0 ||\n\t\telement.getClientRects().length > 0\n\t);\n}\n\n/**\n * Returns true if the specified area element is a valid focusable element, or\n * false otherwise. Area is only focusable if within a map where a named map\n * referenced by an image somewhere in the document.\n *\n * @param {HTMLAreaElement} element DOM area element to test.\n *\n * @return {boolean} Whether area element is valid for focus.\n */\nfunction isValidFocusableArea( element ) {\n\t/** @type {HTMLMapElement | null} */\n\tconst map = element.closest( 'map[name]' );\n\tif ( ! map ) {\n\t\treturn false;\n\t}\n\n\t/** @type {HTMLImageElement | null} */\n\tconst img = element.ownerDocument.querySelector(\n\t\t'img[usemap=\"#' + map.name + '\"]'\n\t);\n\treturn !! img && isVisible( img );\n}\n\n/**\n * Returns all focusable elements within a given context.\n *\n * @param {Element} context              Element in which to search.\n * @param {Object}  options\n * @param {boolean} [options.sequential] If set, only return elements that are\n *                                       sequentially focusable.\n *                                       Non-interactive elements with a\n *                                       negative `tabindex` are focusable but\n *                                       not sequentially focusable.\n *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {HTMLElement[]} Focusable elements.\n */\nexport function find( context, { sequential = false } = {} ) {\n\t/** @type {NodeListOf<HTMLElement>} */\n\tconst elements = context.querySelectorAll( buildSelector( sequential ) );\n\n\treturn Array.from( elements ).filter( ( element ) => {\n\t\tif ( ! isVisible( element ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Elements inside an inert subtree are not focusable.\n\t\tif ( element.closest( '[inert]' ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst { nodeName } = element;\n\t\tif ( 'AREA' === nodeName ) {\n\t\t\treturn isValidFocusableArea(\n\t\t\t\t/** @type {HTMLAreaElement} */ ( element )\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t} );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BA,SAAS,cAAe,YAAa;AACpC,SAAO;AAAA,IACN,aAAa,oCAAoC;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,KAAM,GAAI;AACb;AAUA,SAAS,UAAW,SAAU;AAC7B,MAAK,OAAO,QAAQ,oBAAoB,YAAa;AACpD,QAAK,CAAE,QAAQ,gBAAiB,EAAE,oBAAoB,KAAK,CAAE,GAAI;AAChE,aAAO;AAAA,IACR;AAAA,EACD,OAAO;AACN,UAAM,aACL,QAAQ,cAAc,aAAa;AAAA,MAClC;AAAA,IACD,EAAE;AACH,QAAK,eAAe,YAAY,eAAe,YAAa;AAC3D,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SACC,QAAQ,cAAc,KACtB,QAAQ,eAAe,KACvB,QAAQ,eAAe,EAAE,SAAS;AAEpC;AAWA,SAAS,qBAAsB,SAAU;AAExC,QAAM,MAAM,QAAQ,QAAS,WAAY;AACzC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AAGA,QAAM,MAAM,QAAQ,cAAc;AAAA,IACjC,kBAAkB,IAAI,OAAO;AAAA,EAC9B;AACA,SAAO,CAAC,CAAE,OAAO,UAAW,GAAI;AACjC;AAgBO,SAAS,KAAM,SAAS,EAAE,aAAa,MAAM,IAAI,CAAC,GAAI;AAE5D,QAAM,WAAW,QAAQ,iBAAkB,cAAe,UAAW,CAAE;AAEvE,SAAO,MAAM,KAAM,QAAS,EAAE,OAAQ,CAAE,YAAa;AACpD,QAAK,CAAE,UAAW,OAAQ,GAAI;AAC7B,aAAO;AAAA,IACR;AAGA,QAAK,QAAQ,QAAS,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAEA,UAAM,EAAE,SAAS,IAAI;AACrB,QAAK,WAAW,UAAW;AAC1B,aAAO;AAAA;AAAA,QAC2B;AAAA,MAClC;AAAA,IACD;AAEA,WAAO;AAAA,EACR,CAAE;AACH;",
   "names": []
 }

package/build-module/focusable.mjs

@@ -16,6 +16,18 @@ function buildSelector(sequential) {
   ].join(",");
 }
 function isVisible(element) {
+  if (typeof element.checkVisibility === "function") {
+    if (!element.checkVisibility({ visibilityProperty: true })) {
+      return false;
+    }
+  } else {
+    const visibility = element.ownerDocument.defaultView?.getComputedStyle(
+      element
+    ).visibility;
+    if (visibility === "hidden" || visibility === "collapse") {
+      return false;
+    }
+  }
   return element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;
 }
 function isValidFocusableArea(element) {

package/build-module/focusable.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/focusable.js"],
-  "sourcesContent": ["/**\n * References:\n *\n * Focusable:\n *  - https://www.w3.org/TR/html5/editing.html#focus-management\n *\n * Sequential focus navigation:\n *  - https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute\n *\n * Disabled elements:\n *  - https://www.w3.org/TR/html5/disabled-elements.html#disabled-elements\n *\n * getClientRects algorithm (requiring layout box):\n *  - https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface\n *\n * AREA elements associated with an IMG:\n *  - https://w3c.github.io/html/editing.html#data-model\n */\n\n/**\n * Returns a CSS selector used to query for focusable elements.\n *\n * @param {boolean} sequential If set, only query elements that are sequentially\n *                             focusable. Non-interactive elements with a\n *                             negative `tabindex` are focusable but not\n *                             sequentially focusable.\n *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {string} CSS selector.\n */\nfunction buildSelector( sequential ) {\n\treturn [\n\t\tsequential ? '[tabindex]:not([tabindex^=\"-\"])' : '[tabindex]',\n\t\t'a[href]',\n\t\t'button:not([disabled])',\n\t\t'input:not([type=\"hidden\"]):not([disabled])',\n\t\t'select:not([disabled])',\n\t\t'textarea:not([disabled])',\n\t\t'iframe:not([tabindex^=\"-\"])',\n\t\t'object',\n\t\t'embed',\n\t\t'summary',\n\t\t'area[href]',\n\t\t'[contenteditable]:not([contenteditable=false])',\n\t].join( ',' );\n}\n\n/**\n * Returns true if the specified element is visible (i.e. neither display: none\n * nor visibility: hidden).\n *\n * @param {HTMLElement} element DOM element to test.\n *\n * @return {boolean} Whether element is visible.\n */\nfunction isVisible( element ) {\n\treturn (\n\t\telement.offsetWidth > 0 ||\n\t\telement.offsetHeight > 0 ||\n\t\telement.getClientRects().length > 0\n\t);\n}\n\n/**\n * Returns true if the specified area element is a valid focusable element, or\n * false otherwise. Area is only focusable if within a map where a named map\n * referenced by an image somewhere in the document.\n *\n * @param {HTMLAreaElement} element DOM area element to test.\n *\n * @return {boolean} Whether area element is valid for focus.\n */\nfunction isValidFocusableArea( element ) {\n\t/** @type {HTMLMapElement | null} */\n\tconst map = element.closest( 'map[name]' );\n\tif ( ! map ) {\n\t\treturn false;\n\t}\n\n\t/** @type {HTMLImageElement | null} */\n\tconst img = element.ownerDocument.querySelector(\n\t\t'img[usemap=\"#' + map.name + '\"]'\n\t);\n\treturn !! img && isVisible( img );\n}\n\n/**\n * Returns all focusable elements within a given context.\n *\n * @param {Element} context              Element in which to search.\n * @param {Object}  options\n * @param {boolean} [options.sequential] If set, only return elements that are\n *                                       sequentially focusable.\n *                                       Non-interactive elements with a\n *                                       negative `tabindex` are focusable but\n *                                       not sequentially focusable.\n *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {HTMLElement[]} Focusable elements.\n */\nexport function find( context, { sequential = false } = {} ) {\n\t/** @type {NodeListOf<HTMLElement>} */\n\tconst elements = context.querySelectorAll( buildSelector( sequential ) );\n\n\treturn Array.from( elements ).filter( ( element ) => {\n\t\tif ( ! isVisible( element ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Elements inside an inert subtree are not focusable.\n\t\tif ( element.closest( '[inert]' ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst { nodeName } = element;\n\t\tif ( 'AREA' === nodeName ) {\n\t\t\treturn isValidFocusableArea(\n\t\t\t\t/** @type {HTMLAreaElement} */ ( element )\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t} );\n}\n"],
-  "mappings": ";AA8BA,SAAS,cAAe,YAAa;AACpC,SAAO;AAAA,IACN,aAAa,oCAAoC;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,KAAM,GAAI;AACb;AAUA,SAAS,UAAW,SAAU;AAC7B,SACC,QAAQ,cAAc,KACtB,QAAQ,eAAe,KACvB,QAAQ,eAAe,EAAE,SAAS;AAEpC;AAWA,SAAS,qBAAsB,SAAU;AAExC,QAAM,MAAM,QAAQ,QAAS,WAAY;AACzC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AAGA,QAAM,MAAM,QAAQ,cAAc;AAAA,IACjC,kBAAkB,IAAI,OAAO;AAAA,EAC9B;AACA,SAAO,CAAC,CAAE,OAAO,UAAW,GAAI;AACjC;AAgBO,SAAS,KAAM,SAAS,EAAE,aAAa,MAAM,IAAI,CAAC,GAAI;AAE5D,QAAM,WAAW,QAAQ,iBAAkB,cAAe,UAAW,CAAE;AAEvE,SAAO,MAAM,KAAM,QAAS,EAAE,OAAQ,CAAE,YAAa;AACpD,QAAK,CAAE,UAAW,OAAQ,GAAI;AAC7B,aAAO;AAAA,IACR;AAGA,QAAK,QAAQ,QAAS,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAEA,UAAM,EAAE,SAAS,IAAI;AACrB,QAAK,WAAW,UAAW;AAC1B,aAAO;AAAA;AAAA,QAC2B;AAAA,MAClC;AAAA,IACD;AAEA,WAAO;AAAA,EACR,CAAE;AACH;",
+  "sourcesContent": ["/**\n * References:\n *\n * Focusable:\n *  - https://www.w3.org/TR/html5/editing.html#focus-management\n *\n * Sequential focus navigation:\n *  - https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute\n *\n * Disabled elements:\n *  - https://www.w3.org/TR/html5/disabled-elements.html#disabled-elements\n *\n * getClientRects algorithm (requiring layout box):\n *  - https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface\n *\n * AREA elements associated with an IMG:\n *  - https://w3c.github.io/html/editing.html#data-model\n */\n\n/**\n * Returns a CSS selector used to query for focusable elements.\n *\n * @param {boolean} sequential If set, only query elements that are sequentially\n *                             focusable. Non-interactive elements with a\n *                             negative `tabindex` are focusable but not\n *                             sequentially focusable.\n *                             https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {string} CSS selector.\n */\nfunction buildSelector( sequential ) {\n\treturn [\n\t\tsequential ? '[tabindex]:not([tabindex^=\"-\"])' : '[tabindex]',\n\t\t'a[href]',\n\t\t'button:not([disabled])',\n\t\t'input:not([type=\"hidden\"]):not([disabled])',\n\t\t'select:not([disabled])',\n\t\t'textarea:not([disabled])',\n\t\t'iframe:not([tabindex^=\"-\"])',\n\t\t'object',\n\t\t'embed',\n\t\t'summary',\n\t\t'area[href]',\n\t\t'[contenteditable]:not([contenteditable=false])',\n\t].join( ',' );\n}\n\n/**\n * Returns true if the specified element has a layout box and is not hidden by\n * CSS visibility or content visibility.\n *\n * @param {HTMLElement} element DOM element to test.\n *\n * @return {boolean} Whether element is visible.\n */\nfunction isVisible( element ) {\n\tif ( typeof element.checkVisibility === 'function' ) {\n\t\tif ( ! element.checkVisibility( { visibilityProperty: true } ) ) {\n\t\t\treturn false;\n\t\t}\n\t} else {\n\t\tconst visibility =\n\t\t\telement.ownerDocument.defaultView?.getComputedStyle(\n\t\t\t\telement\n\t\t\t).visibility;\n\t\tif ( visibility === 'hidden' || visibility === 'collapse' ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\treturn (\n\t\telement.offsetWidth > 0 ||\n\t\telement.offsetHeight > 0 ||\n\t\telement.getClientRects().length > 0\n\t);\n}\n\n/**\n * Returns true if the specified area element is a valid focusable element, or\n * false otherwise. Area is only focusable if within a map where a named map\n * referenced by an image somewhere in the document.\n *\n * @param {HTMLAreaElement} element DOM area element to test.\n *\n * @return {boolean} Whether area element is valid for focus.\n */\nfunction isValidFocusableArea( element ) {\n\t/** @type {HTMLMapElement | null} */\n\tconst map = element.closest( 'map[name]' );\n\tif ( ! map ) {\n\t\treturn false;\n\t}\n\n\t/** @type {HTMLImageElement | null} */\n\tconst img = element.ownerDocument.querySelector(\n\t\t'img[usemap=\"#' + map.name + '\"]'\n\t);\n\treturn !! img && isVisible( img );\n}\n\n/**\n * Returns all focusable elements within a given context.\n *\n * @param {Element} context              Element in which to search.\n * @param {Object}  options\n * @param {boolean} [options.sequential] If set, only return elements that are\n *                                       sequentially focusable.\n *                                       Non-interactive elements with a\n *                                       negative `tabindex` are focusable but\n *                                       not sequentially focusable.\n *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute\n *\n * @return {HTMLElement[]} Focusable elements.\n */\nexport function find( context, { sequential = false } = {} ) {\n\t/** @type {NodeListOf<HTMLElement>} */\n\tconst elements = context.querySelectorAll( buildSelector( sequential ) );\n\n\treturn Array.from( elements ).filter( ( element ) => {\n\t\tif ( ! isVisible( element ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Elements inside an inert subtree are not focusable.\n\t\tif ( element.closest( '[inert]' ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst { nodeName } = element;\n\t\tif ( 'AREA' === nodeName ) {\n\t\t\treturn isValidFocusableArea(\n\t\t\t\t/** @type {HTMLAreaElement} */ ( element )\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t} );\n}\n"],
+  "mappings": ";AA8BA,SAAS,cAAe,YAAa;AACpC,SAAO;AAAA,IACN,aAAa,oCAAoC;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,KAAM,GAAI;AACb;AAUA,SAAS,UAAW,SAAU;AAC7B,MAAK,OAAO,QAAQ,oBAAoB,YAAa;AACpD,QAAK,CAAE,QAAQ,gBAAiB,EAAE,oBAAoB,KAAK,CAAE,GAAI;AAChE,aAAO;AAAA,IACR;AAAA,EACD,OAAO;AACN,UAAM,aACL,QAAQ,cAAc,aAAa;AAAA,MAClC;AAAA,IACD,EAAE;AACH,QAAK,eAAe,YAAY,eAAe,YAAa;AAC3D,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SACC,QAAQ,cAAc,KACtB,QAAQ,eAAe,KACvB,QAAQ,eAAe,EAAE,SAAS;AAEpC;AAWA,SAAS,qBAAsB,SAAU;AAExC,QAAM,MAAM,QAAQ,QAAS,WAAY;AACzC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AAGA,QAAM,MAAM,QAAQ,cAAc;AAAA,IACjC,kBAAkB,IAAI,OAAO;AAAA,EAC9B;AACA,SAAO,CAAC,CAAE,OAAO,UAAW,GAAI;AACjC;AAgBO,SAAS,KAAM,SAAS,EAAE,aAAa,MAAM,IAAI,CAAC,GAAI;AAE5D,QAAM,WAAW,QAAQ,iBAAkB,cAAe,UAAW,CAAE;AAEvE,SAAO,MAAM,KAAM,QAAS,EAAE,OAAQ,CAAE,YAAa;AACpD,QAAK,CAAE,UAAW,OAAQ,GAAI;AAC7B,aAAO;AAAA,IACR;AAGA,QAAK,QAAQ,QAAS,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAEA,UAAM,EAAE,SAAS,IAAI;AACrB,QAAK,WAAW,UAAW;AAC1B,aAAO;AAAA;AAAA,QAC2B;AAAA,MAClC;AAAA,IACD;AAEA,WAAO;AAAA,EACR,CAAE;AACH;",
   "names": []
 }

package/build-types/focusable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusable.d.ts","sourceRoot":"","sources":["../src/focusable.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAqEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,IAAI,CAAE,OAAO,EAXlB,OAWkB,EAAE,EAAE,UAAkB,EAAE,GATlD;IAA0B,UAAU,AAApC,CAOA,EAPQ,OAAO,CAOf;CAEuD,GAF9C,WAAW,EAAE,CAyBxB"}
+{"version":3,"file":"focusable.d.ts","sourceRoot":"","sources":["../src/focusable.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAmFH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,IAAI,CAAE,OAAO,EAXlB,OAWkB,EAAE,EAAE,UAAkB,EAAE,GATlD;IAA0B,UAAU,AAApC,CAOA,EAPQ,OAAO,CAOf;CAEuD,GAF9C,WAAW,EAAE,CAyBxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "4.54.1-next.v.202608281122.0",
+	"version": "4.55.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,10 +44,13 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/deprecated": "^4.54.1-next.v.202608281122.0"
+		"@wordpress/deprecated": "^4.55.0"
+	},
+	"devDependencies": {
+		"vitest": "^5.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "de479d415171765f7b573c81aeec5334ff506a12"
+	"gitHead": "485f42ae8a1c58ceea18371a507fd4acfa86fbd8"
 }

package/src/dom/test/{safe-html.js → safe-html.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import safeHTML from '../safe-html';
 
 describe( 'safeHTML', () => {

package/src/dom/test/{strip-html.js → strip-html.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import stripHTML from '../strip-html';
 
 describe( 'stripHTML', () => {

package/src/focusable.js

@@ -46,14 +46,28 @@ function buildSelector( sequential ) {
 }
 
 /**
- * Returns true if the specified element is visible (i.e. neither display: none
- * nor visibility: hidden).
+ * Returns true if the specified element has a layout box and is not hidden by
+ * CSS visibility or content visibility.
  *
  * @param {HTMLElement} element DOM element to test.
  *
  * @return {boolean} Whether element is visible.
  */
 function isVisible( element ) {
+	if ( typeof element.checkVisibility === 'function' ) {
+		if ( ! element.checkVisibility( { visibilityProperty: true } ) ) {
+			return false;
+		}
+	} else {
+		const visibility =
+			element.ownerDocument.defaultView?.getComputedStyle(
+				element
+			).visibility;
+		if ( visibility === 'hidden' || visibility === 'collapse' ) {
+			return false;
+		}
+	}
+
 	return (
 		element.offsetWidth > 0 ||
 		element.offsetHeight > 0 ||

package/src/test/{dom.js → dom.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import {
 	isHorizontalEdge,
 	placeCaretAtHorizontalEdge,

package/src/test/focusable.browser.test.js

@@ -0,0 +1,83 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { find } from '../focusable';
+
+describe( 'focusable.find() CSS visibility', () => {
+	let node;
+
+	beforeEach( () => {
+		node = document.createElement( 'div' );
+		document.body.appendChild( node );
+	} );
+
+	afterEach( () => {
+		node.remove();
+	} );
+
+	it.each( [
+		[ 'visibility: hidden', '<input style="visibility: hidden">' ],
+		[
+			'inherited visibility: hidden',
+			'<div style="visibility: hidden"><input></div>',
+		],
+		[ 'visibility: collapse', '<input style="visibility: collapse">' ],
+		[
+			'content-visibility: hidden ancestor',
+			'<div style="content-visibility: hidden"><input></div>',
+		],
+	] )(
+		'excludes inputs with %s even when they have layout boxes',
+		( _, html ) => {
+			node.innerHTML = html;
+			const input = node.querySelector( 'input' );
+			const checkVisibility = vi.spyOn( input, 'checkVisibility' );
+
+			expect( input.offsetWidth ).toBeGreaterThan( 0 );
+			expect( input.offsetHeight ).toBeGreaterThan( 0 );
+			expect( input.getClientRects().length ).toBeGreaterThan( 0 );
+			input.focus();
+			expect( document.activeElement ).not.toBe( input );
+			expect( find( node ) ).toEqual( [] );
+			expect( checkVisibility ).toHaveBeenCalledWith( {
+				visibilityProperty: true,
+			} );
+		}
+	);
+
+	it( 'includes inputs that restore visibility inside a hidden ancestor', () => {
+		node.style.visibility = 'hidden';
+		node.innerHTML = '<input style="visibility: visible">';
+		const input = node.querySelector( 'input' );
+
+		input.focus();
+		expect( document.activeElement ).toBe( input );
+		expect( find( node ) ).toEqual( [ input ] );
+	} );
+
+	it( 'uses the owning window for the computed-style fallback', () => {
+		const iframe = document.createElement( 'iframe' );
+		node.appendChild( iframe );
+		const iframeDocument = iframe.contentDocument;
+		iframeDocument.body.innerHTML = `
+			<div style="visibility: hidden">
+				<input>
+				<input style="visibility: visible">
+			</div>
+		`;
+		const [ hiddenInput, visibleInput ] =
+			iframeDocument.querySelectorAll( 'input' );
+		Object.defineProperties( hiddenInput, {
+			checkVisibility: { value: undefined },
+		} );
+		Object.defineProperties( visibleInput, {
+			checkVisibility: { value: undefined },
+		} );
+		const getComputedStyle = vi.spyOn(
+			iframeDocument.defaultView,
+			'getComputedStyle'
+		);
+
+		expect( find( iframeDocument.body ) ).toEqual( [ visibleInput ] );
+		expect( getComputedStyle ).toHaveBeenCalledWith( hiddenInput );
+		expect( getComputedStyle ).toHaveBeenCalledWith( visibleInput );
+	} );
+} );

package/src/test/{focusable.js → focusable.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it } from 'vitest';
 import createElement from './utils/create-element';
 import { find } from '../focusable';
 
@@ -107,6 +108,8 @@ describe( 'focusable', () => {
 			const node = createElement( 'div' );
 			const input = createElement( 'input' );
 			node.appendChild( input );
+			// Keep the fixture connected so JSDOM invalidates computed styles.
+			document.body.appendChild( node );
 
 			input.style.visibility = 'hidden';
 			expect( find( node ) ).toEqual( [] );
@@ -125,6 +128,8 @@ describe( 'focusable', () => {
 			const node = createElement( 'div' );
 			const input = createElement( 'input' );
 			node.appendChild( input );
+			// Keep the fixture connected so JSDOM invalidates computed styles.
+			document.body.appendChild( node );
 
 			node.style.visibility = 'hidden';
 			expect( find( node ) ).toEqual( [] );

package/src/test/{tabbable.js → tabbable.jsdom.test.js}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it } from 'vitest';
 import createElement from './utils/create-element';
 import { find } from '../tabbable';
 

package/src/test/utils/create-element.js

@@ -1,6 +1,6 @@
 /**
  * Given an element type, returns an HTMLElement with an emulated layout,
- * since JSDOM does have its own internal layout engine.
+ * since JSDOM does not have its own internal layout engine.
  *
  * @param {string} type Element type.
  *
@@ -14,9 +14,8 @@ export default function createElement( type ) {
 			let isHidden = false;
 			let node = this;
 			do {
-				isHidden =
-					node.style.display === 'none' ||
-					node.style.visibility === 'hidden';
+				// CSS visibility does not remove an element's layout box.
+				isHidden = node.style.display === 'none';
 
 				node = node.parentNode;
 			} while (

package/src/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { assertIsDefined } from '../utils/assert-is-defined';
 
 describe( 'assertIsDefined', () => {