@wordpress/dom 4.55.0 → 4.55.2-next.v.202609171837.0

package/build-module/dom/get-rectangle-from-range.mjs

@@ -40,19 +40,54 @@ function getRectangleFromRange(range) {
       furthestBottom - furthestTop
     );
   }
-  const { startContainer } = range;
+  const { startContainer, startOffset } = range;
   const { ownerDocument } = startContainer;
-  if (startContainer.nodeName === "BR") {
-    const { parentNode } = startContainer;
-    assertIsDefined(parentNode, "parentNode");
-    const index = (
-      /** @type {Node[]} */
-      Array.from(parentNode.childNodes).indexOf(startContainer)
-    );
-    assertIsDefined(ownerDocument, "ownerDocument");
+  assertIsDefined(ownerDocument, "ownerDocument");
+  if (startContainer.nodeType !== startContainer.TEXT_NODE && !startContainer.childNodes.length && startContainer.parentNode) {
     range = ownerDocument.createRange();
-    range.setStart(parentNode, index);
-    range.setEnd(parentNode, index);
+    range.setStartBefore(startContainer);
+    range.collapse(true);
+    return getRectangleFromRange(range);
+  }
+  if (startContainer.nodeType !== startContainer.TEXT_NODE) {
+    let before = startContainer.childNodes[startOffset - 1];
+    while (before?.lastChild) {
+      before = before.lastChild;
+    }
+    let after = startContainer.childNodes[startOffset];
+    while (after?.firstChild) {
+      after = after.firstChild;
+    }
+    let beforeRange;
+    if (before && before.nodeType === before.TEXT_NODE) {
+      beforeRange = ownerDocument.createRange();
+      beforeRange.setStart(
+        before,
+        /** @type {Text} */
+        before.length
+      );
+      beforeRange.collapse(true);
+    }
+    let afterRange;
+    if (after && after.nodeType === after.TEXT_NODE) {
+      afterRange = ownerDocument.createRange();
+      afterRange.setStart(after, 0);
+      afterRange.collapse(true);
+    }
+    if (beforeRange && afterRange) {
+      const beforeRect = beforeRange.getClientRects()[0];
+      const afterRect = afterRange.getClientRects()[0];
+      if (beforeRect && afterRect && beforeRect.bottom <= afterRect.top) {
+        return null;
+      }
+    }
+    if (afterRange) {
+      range = afterRange;
+    } else if (beforeRange) {
+      range = beforeRange;
+    } else {
+      return null;
+    }
   }
   const rects = range.getClientRects();
   if (rects.length > 1) {
@@ -73,17 +108,7 @@ function getRectangleFromRange(range) {
       return null;
     }
   }
-  let rect = rects[0];
-  if (!rect || rect.height === 0) {
-    assertIsDefined(ownerDocument, "ownerDocument");
-    const padNode = ownerDocument.createTextNode("​");
-    range = range.cloneRange();
-    range.insertNode(padNode);
-    rect = range.getClientRects()[0];
-    assertIsDefined(padNode.parentNode, "padNode.parentNode");
-    padNode.parentNode.removeChild(padNode);
-  }
-  return rect;
+  return rects[0] ?? null;
 }
 export {
   getRectangleFromRange as default

package/build-module/dom/get-rectangle-from-range.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/dom/get-rectangle-from-range.js"],
-  "sourcesContent": ["import { assertIsDefined } from '../utils/assert-is-defined';\n\n/**\n * Get the rectangle of a given Range. Returns `null` if no suitable rectangle\n * can be found. Use instead of `Range.getBoundingClientRect()`, which is often\n * broken, especially for collapsed ranges.\n *\n * @param {Range} range The range.\n *\n * @return {DOMRect?} The rectangle.\n */\nexport default function getRectangleFromRange( range ) {\n\t// For uncollapsed ranges, get the rectangle that bounds the contents of the\n\t// range; this a rectangle enclosing the union of the bounding rectangles\n\t// for all the elements in the range.\n\tif ( ! range.collapsed ) {\n\t\tconst rects = Array.from( range.getClientRects() );\n\n\t\t// If there's just a single rect, return it.\n\t\tif ( rects.length === 1 ) {\n\t\t\treturn rects[ 0 ];\n\t\t}\n\n\t\t// Ignore tiny selection at the edge of a range.\n\t\tconst filteredRects = rects.filter( ( { width } ) => width > 1 );\n\n\t\t// If it's full of tiny selections, return browser default.\n\t\tif ( filteredRects.length === 0 ) {\n\t\t\treturn range.getBoundingClientRect();\n\t\t}\n\n\t\tif ( filteredRects.length === 1 ) {\n\t\t\treturn filteredRects[ 0 ];\n\t\t}\n\n\t\tlet {\n\t\t\ttop: furthestTop,\n\t\t\tbottom: furthestBottom,\n\t\t\tleft: furthestLeft,\n\t\t\tright: furthestRight,\n\t\t} = filteredRects[ 0 ];\n\n\t\tfor ( const { top, bottom, left, right } of filteredRects ) {\n\t\t\tif ( top < furthestTop ) {\n\t\t\t\tfurthestTop = top;\n\t\t\t}\n\t\t\tif ( bottom > furthestBottom ) {\n\t\t\t\tfurthestBottom = bottom;\n\t\t\t}\n\t\t\tif ( left < furthestLeft ) {\n\t\t\t\tfurthestLeft = left;\n\t\t\t}\n\t\t\tif ( right > furthestRight ) {\n\t\t\t\tfurthestRight = right;\n\t\t\t}\n\t\t}\n\n\t\treturn new window.DOMRect(\n\t\t\tfurthestLeft,\n\t\t\tfurthestTop,\n\t\t\tfurthestRight - furthestLeft,\n\t\t\tfurthestBottom - furthestTop\n\t\t);\n\t}\n\n\tconst { startContainer } = range;\n\tconst { ownerDocument } = startContainer;\n\n\t// Correct invalid \"BR\" ranges. The cannot contain any children.\n\tif ( startContainer.nodeName === 'BR' ) {\n\t\tconst { parentNode } = startContainer;\n\t\tassertIsDefined( parentNode, 'parentNode' );\n\t\tconst index = /** @type {Node[]} */ (\n\t\t\tArray.from( parentNode.childNodes )\n\t\t).indexOf( startContainer );\n\n\t\tassertIsDefined( ownerDocument, 'ownerDocument' );\n\t\trange = ownerDocument.createRange();\n\t\trange.setStart( parentNode, index );\n\t\trange.setEnd( parentNode, index );\n\t}\n\n\tconst rects = range.getClientRects();\n\n\t// If we have multiple rectangles for a collapsed range, there's no way to\n\t// know which it is, so don't return anything.\n\tif ( rects.length > 1 ) {\n\t\treturn null;\n\t}\n\n\t// A collapsed range at a soft line wrap is equally ambiguous: the same\n\t// position ends one line and starts the next. Some browsers (Gecko)\n\t// return a single rectangle for it, on the upper line, regardless of\n\t// where the caret is. Detect the boundary by measuring the characters\n\t// around the position: when they sit on different lines, there is no\n\t// way to know which line the caret is on, so don't return anything.\n\tif (\n\t\trects.length === 1 &&\n\t\tstartContainer.nodeType === startContainer.TEXT_NODE &&\n\t\trange.startOffset > 0 &&\n\t\trange.startOffset < /** @type {Text} */ ( startContainer ).length\n\t) {\n\t\tassertIsDefined( ownerDocument, 'ownerDocument' );\n\t\tconst measure = (\n\t\t\t/** @type {number} */ start,\n\t\t\t/** @type {number} */ end\n\t\t) => {\n\t\t\tconst charRange = ownerDocument.createRange();\n\t\t\tcharRange.setStart( startContainer, start );\n\t\t\tcharRange.setEnd( startContainer, end );\n\t\t\treturn charRange.getBoundingClientRect();\n\t\t};\n\t\tconst before = measure( range.startOffset - 1, range.startOffset );\n\t\tconst after = measure( range.startOffset, range.startOffset + 1 );\n\n\t\tif ( before.bottom <= after.top ) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tlet rect = rects[ 0 ];\n\n\t// If the collapsed range starts (and therefore ends) at an element node,\n\t// `getClientRects` can be empty in some browsers. This can be resolved\n\t// by adding a temporary text node with zero-width space to the range.\n\t//\n\t// See: https://stackoverflow.com/a/6847328/995445\n\tif ( ! rect || rect.height === 0 ) {\n\t\tassertIsDefined( ownerDocument, 'ownerDocument' );\n\t\tconst padNode = ownerDocument.createTextNode( '\\u200b' );\n\t\t// Do not modify the live range.\n\t\trange = range.cloneRange();\n\t\trange.insertNode( padNode );\n\t\trect = range.getClientRects()[ 0 ];\n\t\tassertIsDefined( padNode.parentNode, 'padNode.parentNode' );\n\t\tpadNode.parentNode.removeChild( padNode );\n\t}\n\n\treturn rect;\n}\n"],
-  "mappings": ";AAAA,SAAS,uBAAuB;AAWjB,SAAR,sBAAwC,OAAQ;AAItD,MAAK,CAAE,MAAM,WAAY;AACxB,UAAMA,SAAQ,MAAM,KAAM,MAAM,eAAe,CAAE;AAGjD,QAAKA,OAAM,WAAW,GAAI;AACzB,aAAOA,OAAO,CAAE;AAAA,IACjB;AAGA,UAAM,gBAAgBA,OAAM,OAAQ,CAAE,EAAE,MAAM,MAAO,QAAQ,CAAE;AAG/D,QAAK,cAAc,WAAW,GAAI;AACjC,aAAO,MAAM,sBAAsB;AAAA,IACpC;AAEA,QAAK,cAAc,WAAW,GAAI;AACjC,aAAO,cAAe,CAAE;AAAA,IACzB;AAEA,QAAI;AAAA,MACH,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACR,IAAI,cAAe,CAAE;AAErB,eAAY,EAAE,KAAK,QAAQ,MAAM,MAAM,KAAK,eAAgB;AAC3D,UAAK,MAAM,aAAc;AACxB,sBAAc;AAAA,MACf;AACA,UAAK,SAAS,gBAAiB;AAC9B,yBAAiB;AAAA,MAClB;AACA,UAAK,OAAO,cAAe;AAC1B,uBAAe;AAAA,MAChB;AACA,UAAK,QAAQ,eAAgB;AAC5B,wBAAgB;AAAA,MACjB;AAAA,IACD;AAEA,WAAO,IAAI,OAAO;AAAA,MACjB;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,IAClB;AAAA,EACD;AAEA,QAAM,EAAE,eAAe,IAAI;AAC3B,QAAM,EAAE,cAAc,IAAI;AAG1B,MAAK,eAAe,aAAa,MAAO;AACvC,UAAM,EAAE,WAAW,IAAI;AACvB,oBAAiB,YAAY,YAAa;AAC1C,UAAM;AAAA;AAAA,MACL,MAAM,KAAM,WAAW,UAAW,EACjC,QAAS,cAAe;AAAA;AAE1B,oBAAiB,eAAe,eAAgB;AAChD,YAAQ,cAAc,YAAY;AAClC,UAAM,SAAU,YAAY,KAAM;AAClC,UAAM,OAAQ,YAAY,KAAM;AAAA,EACjC;AAEA,QAAM,QAAQ,MAAM,eAAe;AAInC,MAAK,MAAM,SAAS,GAAI;AACvB,WAAO;AAAA,EACR;AAQA,MACC,MAAM,WAAW,KACjB,eAAe,aAAa,eAAe,aAC3C,MAAM,cAAc,KACpB,MAAM;AAAA,EAAoC,eAAiB,QAC1D;AACD,oBAAiB,eAAe,eAAgB;AAChD,UAAM,UAAU,CACO,OACA,QAClB;AACJ,YAAM,YAAY,cAAc,YAAY;AAC5C,gBAAU,SAAU,gBAAgB,KAAM;AAC1C,gBAAU,OAAQ,gBAAgB,GAAI;AACtC,aAAO,UAAU,sBAAsB;AAAA,IACxC;AACA,UAAM,SAAS,QAAS,MAAM,cAAc,GAAG,MAAM,WAAY;AACjE,UAAM,QAAQ,QAAS,MAAM,aAAa,MAAM,cAAc,CAAE;AAEhE,QAAK,OAAO,UAAU,MAAM,KAAM;AACjC,aAAO;AAAA,IACR;AAAA,EACD;AAEA,MAAI,OAAO,MAAO,CAAE;AAOpB,MAAK,CAAE,QAAQ,KAAK,WAAW,GAAI;AAClC,oBAAiB,eAAe,eAAgB;AAChD,UAAM,UAAU,cAAc,eAAgB,GAAS;AAEvD,YAAQ,MAAM,WAAW;AACzB,UAAM,WAAY,OAAQ;AAC1B,WAAO,MAAM,eAAe,EAAG,CAAE;AACjC,oBAAiB,QAAQ,YAAY,oBAAqB;AAC1D,YAAQ,WAAW,YAAa,OAAQ;AAAA,EACzC;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import { assertIsDefined } from '../utils/assert-is-defined';\n\n/**\n * Get the rectangle of a given Range. Returns `null` if no suitable rectangle\n * can be found. Use instead of `Range.getBoundingClientRect()`, which is often\n * broken, especially for collapsed ranges.\n *\n * @param {Range} range The range.\n *\n * @return {DOMRect?} The rectangle.\n */\nexport default function getRectangleFromRange( range ) {\n\t// For uncollapsed ranges, get the rectangle that bounds the contents of the\n\t// range; this a rectangle enclosing the union of the bounding rectangles\n\t// for all the elements in the range.\n\tif ( ! range.collapsed ) {\n\t\tconst rects = Array.from( range.getClientRects() );\n\n\t\t// If there's just a single rect, return it.\n\t\tif ( rects.length === 1 ) {\n\t\t\treturn rects[ 0 ];\n\t\t}\n\n\t\t// Ignore tiny selection at the edge of a range.\n\t\tconst filteredRects = rects.filter( ( { width } ) => width > 1 );\n\n\t\t// If it's full of tiny selections, return browser default.\n\t\tif ( filteredRects.length === 0 ) {\n\t\t\treturn range.getBoundingClientRect();\n\t\t}\n\n\t\tif ( filteredRects.length === 1 ) {\n\t\t\treturn filteredRects[ 0 ];\n\t\t}\n\n\t\tlet {\n\t\t\ttop: furthestTop,\n\t\t\tbottom: furthestBottom,\n\t\t\tleft: furthestLeft,\n\t\t\tright: furthestRight,\n\t\t} = filteredRects[ 0 ];\n\n\t\tfor ( const { top, bottom, left, right } of filteredRects ) {\n\t\t\tif ( top < furthestTop ) {\n\t\t\t\tfurthestTop = top;\n\t\t\t}\n\t\t\tif ( bottom > furthestBottom ) {\n\t\t\t\tfurthestBottom = bottom;\n\t\t\t}\n\t\t\tif ( left < furthestLeft ) {\n\t\t\t\tfurthestLeft = left;\n\t\t\t}\n\t\t\tif ( right > furthestRight ) {\n\t\t\t\tfurthestRight = right;\n\t\t\t}\n\t\t}\n\n\t\treturn new window.DOMRect(\n\t\t\tfurthestLeft,\n\t\t\tfurthestTop,\n\t\t\tfurthestRight - furthestLeft,\n\t\t\tfurthestBottom - furthestTop\n\t\t);\n\t}\n\n\tconst { startContainer, startOffset } = range;\n\tconst { ownerDocument } = startContainer;\n\tassertIsDefined( ownerDocument, 'ownerDocument' );\n\n\t// A range inside an element with no children, like a line break or the\n\t// placeholder, is the same spot as the position before that element.\n\tif (\n\t\tstartContainer.nodeType !== startContainer.TEXT_NODE &&\n\t\t! startContainer.childNodes.length &&\n\t\tstartContainer.parentNode\n\t) {\n\t\trange = ownerDocument.createRange();\n\t\trange.setStartBefore( startContainer );\n\t\trange.collapse( true );\n\t\treturn getRectangleFromRange( range );\n\t}\n\n\t// A collapsed range at an element offset has no rectangle. Translate it\n\t// to the text offset next to it: the end of the text before or the start\n\t// of the text after. When those sit on different lines the caret could\n\t// be on either, so return null.\n\tif ( startContainer.nodeType !== startContainer.TEXT_NODE ) {\n\t\tlet before = startContainer.childNodes[ startOffset - 1 ];\n\t\twhile ( before?.lastChild ) {\n\t\t\tbefore = before.lastChild;\n\t\t}\n\t\tlet after = startContainer.childNodes[ startOffset ];\n\t\twhile ( after?.firstChild ) {\n\t\t\tafter = after.firstChild;\n\t\t}\n\n\t\tlet beforeRange;\n\t\tif ( before && before.nodeType === before.TEXT_NODE ) {\n\t\t\tbeforeRange = ownerDocument.createRange();\n\t\t\tbeforeRange.setStart(\n\t\t\t\tbefore,\n\t\t\t\t/** @type {Text} */ ( before ).length\n\t\t\t);\n\t\t\tbeforeRange.collapse( true );\n\t\t}\n\t\tlet afterRange;\n\t\tif ( after && after.nodeType === after.TEXT_NODE ) {\n\t\t\tafterRange = ownerDocument.createRange();\n\t\t\tafterRange.setStart( after, 0 );\n\t\t\tafterRange.collapse( true );\n\t\t}\n\n\t\tif ( beforeRange && afterRange ) {\n\t\t\tconst beforeRect = beforeRange.getClientRects()[ 0 ];\n\t\t\tconst afterRect = afterRange.getClientRects()[ 0 ];\n\t\t\tif (\n\t\t\t\tbeforeRect &&\n\t\t\t\tafterRect &&\n\t\t\t\tbeforeRect.bottom <= afterRect.top\n\t\t\t) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t}\n\n\t\tif ( afterRange ) {\n\t\t\trange = afterRange;\n\t\t} else if ( beforeRange ) {\n\t\t\trange = beforeRange;\n\t\t} else {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tconst rects = range.getClientRects();\n\n\t// If we have multiple rectangles for a collapsed range, there's no way to\n\t// know which it is, so don't return anything.\n\tif ( rects.length > 1 ) {\n\t\treturn null;\n\t}\n\n\t// A collapsed range at a soft line wrap is equally ambiguous: the same\n\t// position ends one line and starts the next. Some browsers (Gecko)\n\t// return a single rectangle for it, on the upper line, regardless of\n\t// where the caret is. Detect the boundary by measuring the characters\n\t// around the position: when they sit on different lines, there is no\n\t// way to know which line the caret is on, so don't return anything.\n\tif (\n\t\trects.length === 1 &&\n\t\tstartContainer.nodeType === startContainer.TEXT_NODE &&\n\t\trange.startOffset > 0 &&\n\t\trange.startOffset < /** @type {Text} */ ( startContainer ).length\n\t) {\n\t\tassertIsDefined( ownerDocument, 'ownerDocument' );\n\t\tconst measure = (\n\t\t\t/** @type {number} */ start,\n\t\t\t/** @type {number} */ end\n\t\t) => {\n\t\t\tconst charRange = ownerDocument.createRange();\n\t\t\tcharRange.setStart( startContainer, start );\n\t\t\tcharRange.setEnd( startContainer, end );\n\t\t\treturn charRange.getBoundingClientRect();\n\t\t};\n\t\tconst before = measure( range.startOffset - 1, range.startOffset );\n\t\tconst after = measure( range.startOffset, range.startOffset + 1 );\n\n\t\tif ( before.bottom <= after.top ) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\treturn rects[ 0 ] ?? null;\n}\n"],
+  "mappings": "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",
   "names": ["rects"]
 }

package/build-module/focusable.mjs

@@ -38,17 +38,11 @@ function isValidFocusableArea(element) {
   const img = element.ownerDocument.querySelector(
     'img[usemap="#' + map.name + '"]'
   );
-  return !!img && isVisible(img);
+  return !!img && !img.closest("[inert]") && isVisible(img);
 }
 function find(context, { sequential = false } = {}) {
   const elements = context.querySelectorAll(buildSelector(sequential));
   return Array.from(elements).filter((element) => {
-    if (!isVisible(element)) {
-      return false;
-    }
-    if (element.closest("[inert]")) {
-      return false;
-    }
     const { nodeName } = element;
     if ("AREA" === nodeName) {
       return isValidFocusableArea(
@@ -56,7 +50,10 @@ function find(context, { sequential = false } = {}) {
         element
       );
     }
-    return true;
+    if (element.closest("[inert]")) {
+      return false;
+    }
+    return isVisible(element);
   });
 }
 export {

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 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;",
+  "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 && ! img.closest( '[inert]' ) && 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\tconst { nodeName } = element;\n\t\tif ( 'AREA' === nodeName ) {\n\t\t\t// The mapped image determines whether this region is visible or inert.\n\t\t\treturn isValidFocusableArea(\n\t\t\t\t/** @type {HTMLAreaElement} */ ( element )\n\t\t\t);\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\treturn isVisible( element );\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,CAAE,IAAI,QAAS,SAAU,KAAK,UAAW,GAAI;AAC/D;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,UAAM,EAAE,SAAS,IAAI;AACrB,QAAK,WAAW,UAAW;AAE1B,aAAO;AAAA;AAAA,QAC2B;AAAA,MAClC;AAAA,IACD;AAGA,QAAK,QAAQ,QAAS,SAAU,GAAI;AACnC,aAAO;AAAA,IACR;AAEA,WAAO,UAAW,OAAQ;AAAA,EAC3B,CAAE;AACH;",
   "names": []
 }

package/build-types/dom/get-rectangle-from-range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-rectangle-from-range.d.ts","sourceRoot":"","sources":["../../src/dom/get-rectangle-from-range.js"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAE,KAAK,EAJzC,KAIyC,GAFxC,OAAO,OAAC,CAkInB"}
+{"version":3,"file":"get-rectangle-from-range.d.ts","sourceRoot":"","sources":["../../src/dom/get-rectangle-from-range.js"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAE,KAAK,EAJzC,KAIyC,GAFxC,OAAO,OAAC,CAmKnB"}

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

@@ -1 +1 @@
-{"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"}
+{"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,CAsBxB"}

package/package.json

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

package/src/dom/get-rectangle-from-range.js

@@ -63,21 +63,72 @@ export default function getRectangleFromRange( range ) {
 		);
 	}
 
-	const { startContainer } = range;
+	const { startContainer, startOffset } = range;
 	const { ownerDocument } = startContainer;
+	assertIsDefined( ownerDocument, 'ownerDocument' );
 
-	// Correct invalid "BR" ranges. The cannot contain any children.
-	if ( startContainer.nodeName === 'BR' ) {
-		const { parentNode } = startContainer;
-		assertIsDefined( parentNode, 'parentNode' );
-		const index = /** @type {Node[]} */ (
-			Array.from( parentNode.childNodes )
-		).indexOf( startContainer );
-
-		assertIsDefined( ownerDocument, 'ownerDocument' );
+	// A range inside an element with no children, like a line break or the
+	// placeholder, is the same spot as the position before that element.
+	if (
+		startContainer.nodeType !== startContainer.TEXT_NODE &&
+		! startContainer.childNodes.length &&
+		startContainer.parentNode
+	) {
 		range = ownerDocument.createRange();
-		range.setStart( parentNode, index );
-		range.setEnd( parentNode, index );
+		range.setStartBefore( startContainer );
+		range.collapse( true );
+		return getRectangleFromRange( range );
+	}
+
+	// A collapsed range at an element offset has no rectangle. Translate it
+	// to the text offset next to it: the end of the text before or the start
+	// of the text after. When those sit on different lines the caret could
+	// be on either, so return null.
+	if ( startContainer.nodeType !== startContainer.TEXT_NODE ) {
+		let before = startContainer.childNodes[ startOffset - 1 ];
+		while ( before?.lastChild ) {
+			before = before.lastChild;
+		}
+		let after = startContainer.childNodes[ startOffset ];
+		while ( after?.firstChild ) {
+			after = after.firstChild;
+		}
+
+		let beforeRange;
+		if ( before && before.nodeType === before.TEXT_NODE ) {
+			beforeRange = ownerDocument.createRange();
+			beforeRange.setStart(
+				before,
+				/** @type {Text} */ ( before ).length
+			);
+			beforeRange.collapse( true );
+		}
+		let afterRange;
+		if ( after && after.nodeType === after.TEXT_NODE ) {
+			afterRange = ownerDocument.createRange();
+			afterRange.setStart( after, 0 );
+			afterRange.collapse( true );
+		}
+
+		if ( beforeRange && afterRange ) {
+			const beforeRect = beforeRange.getClientRects()[ 0 ];
+			const afterRect = afterRange.getClientRects()[ 0 ];
+			if (
+				beforeRect &&
+				afterRect &&
+				beforeRect.bottom <= afterRect.top
+			) {
+				return null;
+			}
+		}
+
+		if ( afterRange ) {
+			range = afterRange;
+		} else if ( beforeRange ) {
+			range = beforeRange;
+		} else {
+			return null;
+		}
 	}
 
 	const rects = range.getClientRects();
@@ -118,23 +169,5 @@ export default function getRectangleFromRange( range ) {
 		}
 	}
 
-	let rect = rects[ 0 ];
-
-	// If the collapsed range starts (and therefore ends) at an element node,
-	// `getClientRects` can be empty in some browsers. This can be resolved
-	// by adding a temporary text node with zero-width space to the range.
-	//
-	// See: https://stackoverflow.com/a/6847328/995445
-	if ( ! rect || rect.height === 0 ) {
-		assertIsDefined( ownerDocument, 'ownerDocument' );
-		const padNode = ownerDocument.createTextNode( '\u200b' );
-		// Do not modify the live range.
-		range = range.cloneRange();
-		range.insertNode( padNode );
-		rect = range.getClientRects()[ 0 ];
-		assertIsDefined( padNode.parentNode, 'padNode.parentNode' );
-		padNode.parentNode.removeChild( padNode );
-	}
-
-	return rect;
+	return rects[ 0 ] ?? null;
 }

package/src/dom/test/get-rectangle-from-range.browser.test.js

@@ -0,0 +1,128 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import getRectangleFromRange from '../get-rectangle-from-range';
+
+describe( 'getRectangleFromRange', () => {
+	let container;
+
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		container.remove();
+	} );
+
+	function collapsedRange( node, offset ) {
+		const range = document.createRange();
+		range.setStart( node, offset );
+		range.collapse( true );
+		return range;
+	}
+
+	// The caret rectangle the browser gives for a position in a text node.
+	function caretBox( node, offset ) {
+		return collapsedRange( node, offset ).getClientRects()[ 0 ].toJSON();
+	}
+
+	function box( rect ) {
+		return rect.toJSON();
+	}
+
+	it( 'measures a position after the last child of an element at the end of its text', () => {
+		container.innerHTML = '<div>wordpress.org</div>';
+		const element = container.firstChild;
+		const range = collapsedRange( element, 1 );
+		const mutations = [];
+		new window.MutationObserver( ( records ) =>
+			mutations.push( ...records )
+		).observe( element, { childList: true, subtree: true } );
+
+		expect( range.getClientRects() ).toHaveLength( 0 );
+		expect( box( getRectangleFromRange( range ) ) ).toEqual(
+			caretBox( element.firstChild, 13 )
+		);
+		expect( range.startContainer ).toBe( element );
+		return Promise.resolve().then( () => {
+			expect( mutations ).toEqual( [] );
+		} );
+	} );
+
+	it( 'measures a position before the first child of an element at the start of its text', () => {
+		container.innerHTML = '<div><em>abc</em>def</div>';
+		const element = container.firstChild;
+
+		expect(
+			box( getRectangleFromRange( collapsedRange( element, 0 ) ) )
+		).toEqual( caretBox( element.querySelector( 'em' ).firstChild, 0 ) );
+	} );
+
+	it( 'measures a position after a line break at the start of the next line', () => {
+		container.innerHTML = '<p>abc<br>def</p>';
+		const paragraph = container.firstChild;
+		const nextLine = caretBox( paragraph.lastChild, 0 );
+
+		expect( nextLine.top ).toBeGreaterThan(
+			caretBox( paragraph.firstChild, 3 ).top
+		);
+		expect(
+			box( getRectangleFromRange( collapsedRange( paragraph, 2 ) ) )
+		).toEqual( nextLine );
+	} );
+
+	it( 'returns null for a position between texts on different lines', () => {
+		container.innerHTML =
+			'<p style="width: 3ch; font-family: monospace; overflow-wrap: anywhere;">abc<em>def</em></p>';
+		const paragraph = container.firstChild;
+
+		expect(
+			caretBox( paragraph.lastChild.firstChild, 0 ).top
+		).toBeGreaterThan( caretBox( paragraph.firstChild, 3 ).top );
+		expect(
+			getRectangleFromRange( collapsedRange( paragraph, 1 ) )
+		).toBeNull();
+	} );
+
+	it( 'measures a position between texts on the same line', () => {
+		container.innerHTML = '<p>abc<em>def</em></p>';
+		const paragraph = container.firstChild;
+
+		expect(
+			box( getRectangleFromRange( collapsedRange( paragraph, 1 ) ) )
+		).toEqual( caretBox( paragraph.lastChild.firstChild, 0 ) );
+	} );
+
+	it( 'measures a position inside an empty inline element beside the text next to it', () => {
+		container.innerHTML =
+			'<p><span data-rich-text-placeholder="Type"></span></p>';
+		const paragraph = container.firstChild;
+		const placeholder = paragraph.querySelector( 'span' );
+
+		expect(
+			box( getRectangleFromRange( collapsedRange( placeholder, 0 ) ) )
+		).toEqual( caretBox( paragraph.firstChild, 1 ) );
+	} );
+
+	it( 'measures a position inside a line break at the end of the text before it', () => {
+		container.innerHTML = '<p>abc<br>def</p>';
+		const paragraph = container.firstChild;
+
+		expect(
+			box(
+				getRectangleFromRange(
+					collapsedRange( paragraph.querySelector( 'br' ), 0 )
+				)
+			)
+		).toEqual( caretBox( paragraph.firstChild, 3 ) );
+	} );
+
+	it( 'returns null for a position with no text on either side', () => {
+		container.innerHTML = '<p><br></p>';
+		const paragraph = container.firstChild;
+
+		expect(
+			getRectangleFromRange( collapsedRange( paragraph, 1 ) )
+		).toBeNull();
+		expect( paragraph.innerHTML ).toBe( '<br>' );
+	} );
+} );

package/src/focusable.js

@@ -95,7 +95,7 @@ function isValidFocusableArea( element ) {
 	const img = element.ownerDocument.querySelector(
 		'img[usemap="#' + map.name + '"]'
 	);
-	return !! img && isVisible( img );
+	return !! img && ! img.closest( '[inert]' ) && isVisible( img );
 }
 
 /**
@@ -117,22 +117,19 @@ export function find( context, { sequential = false } = {} ) {
 	const elements = context.querySelectorAll( buildSelector( sequential ) );
 
 	return Array.from( elements ).filter( ( element ) => {
-		if ( ! isVisible( element ) ) {
-			return false;
-		}
-
-		// Elements inside an inert subtree are not focusable.
-		if ( element.closest( '[inert]' ) ) {
-			return false;
-		}
-
 		const { nodeName } = element;
 		if ( 'AREA' === nodeName ) {
+			// The mapped image determines whether this region is visible or inert.
 			return isValidFocusableArea(
 				/** @type {HTMLAreaElement} */ ( element )
 			);
 		}
 
-		return true;
+		// Elements inside an inert subtree are not focusable.
+		if ( element.closest( '[inert]' ) ) {
+			return false;
+		}
+
+		return isVisible( element );
 	} );
 }

package/src/test/focusable-area.jsdom.test.js

@@ -0,0 +1,43 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { find } from '../focusable';
+
+function createImageWithLayout() {
+	const image = document.createElement( 'img' );
+
+	Object.defineProperties( image, {
+		offsetHeight: { value: 10 },
+		offsetWidth: { value: 10 },
+	} );
+
+	return image;
+}
+
+describe( 'focusable.find() image map areas', () => {
+	beforeEach( () => {
+		document.body.innerHTML = '';
+	} );
+
+	it( 'finds an area in a named map referenced by an image', () => {
+		const map = document.createElement( 'map' );
+		map.name = 'testfocus';
+		const area = document.createElement( 'area' );
+		area.href = '';
+		map.appendChild( area );
+		const image = createImageWithLayout();
+		image.setAttribute( 'usemap', '#testfocus' );
+		document.body.append( map, image );
+
+		expect( find( map ) ).toEqual( [ area ] );
+	} );
+
+	it( 'ignores an area when no image references its map', () => {
+		const map = document.createElement( 'map' );
+		map.name = 'testfocus';
+		const area = document.createElement( 'area' );
+		area.href = '';
+		map.appendChild( area );
+		document.body.append( map );
+
+		expect( find( map ) ).toEqual( [] );
+	} );
+} );