@arraypress/extension-kit 1.11.0 → 1.11.1

package/README.md

@@ -511,7 +511,10 @@ button (or `focusTo`); an item runs once the menu has closed. `createMenu({id, p
 opens it below the button instead. `menuPosition` and `isInside` are the pure geometry. In a
 content script, give it the overlay's shadow root (`createMenu({root})`, a closed one too): the
 keys it handles don't reach the page's own shortcuts, and `destroy()` takes it off the page with
-its window listener. On a right-to-left page it lines up with its button's other edge.
+its window listener. On a right-to-left page it lines up with its button's other edge. The
+button's box is read before the menu opens (opening takes the focus, and a button shown only
+while its row holds the focus has no box after); a button that isn't drawn opens it from its
+nearest drawn ancestor, the row.
 
 `moreActionsButton(name, options)` is the 32px ⋮ icon button, labelled "More actions for “name”"
 (`label` for a translation), with `aria-haspopup="menu"`; its icon is the stylesheet's
@@ -570,7 +573,9 @@ toast.show('Copied'); // no Undo
 `#toast` (`role="status"`), bottom left, a manual `popover` so it's in the top layer, over
 anything the page stacks (`:popover-open` while it shows). A new message replaces the last and
 restarts the wait: 10 seconds, as chrome://bookmarks's (`TOAST_MS`), or `duration` /
-`undoDuration`. Undo hides it and runs once. `undoLabel` translates the button.
+`undoDuration`. Undo hides it and runs once. `undoLabel` translates the button. While the keyboard
+focus is on Undo, or the pointer is over the toast, it stays; the wait starts again in full once
+they leave (as cr-toast, which stops its timer on `focusin`).
 
 ### Site list
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arraypress/extension-kit",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Shared pieces for Chrome extensions: Chrome's own page styles and components, a Chrome Sync settings store, the light/dark toolbar glyph, Chrome's on-device model, content-script helpers, About links, and build and test helpers.",
   "type": "module",
   "main": "src/index.js",

package/src/styles/chrome-ui.css

@@ -1085,7 +1085,10 @@ label.row, .row[actionable] { cursor: pointer; }
     margin-inline: 8px -4px;
 }
 
+/* Shown too while one of its buttons has its menu open: the menu is modal and takes the focus and
+   the pointer, and the button it opened from (where the focus goes back) would vanish under it. */
 .sp-item:is(:hover, :focus-within) .sp-suffix,
+.sp-suffix:has([aria-expanded="true"]),
 .sp-suffix.always { display: flex; }
 
 /* .sp-notice (ui/notice.js): a card saying what a list leaves out or can't do; a warning's icon in

package/src/ui/menu.js

@@ -101,6 +101,20 @@ export function isInside(box, x, y) {
   return x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
 }
 
+/**
+ * The box a menu opens from: the anchor's, or, when the anchor has none (it isn't drawn: a row's
+ * buttons shown only while the row is hovered or holds the focus), its nearest ancestor's that has.
+ *
+ * @param {Element} anchor - The button that opened the menu.
+ * @returns {DOMRect | undefined} The box; undefined when nothing up to the root is drawn.
+ */
+function anchorBox(anchor) {
+  for (let at = /** @type {Element | null} */ (anchor); at; at = at.parentElement) {
+    if (at.getClientRects().length) return at.getBoundingClientRect();
+  }
+  return undefined;
+}
+
 /**
  * What {@link createMenu} takes.
  *
@@ -240,10 +254,13 @@ export function createMenu({ id, placement = 'over', root, doc = rootDocument(ro
         anchor.setAttribute('aria-expanded', 'true');
         expanded = anchor;
       }
+      // Measured before the menu opens: it takes the focus, and a button shown only while its row
+      // holds the focus (`.sp-suffix`) has no box after that, so the menu would open in the corner.
+      const from = anchor && anchorBox(anchor);
       menu.showModal();
       const { width, height } = menu.getBoundingClientRect();
       const { left, top } = menuPosition({ width, height }, { width: view.innerWidth, height: view.innerHeight }, {
-        anchor: anchor?.getBoundingClientRect(), x, y, placement, rtl: view.getComputedStyle(menu).direction === 'rtl',
+        anchor: from, x, y, placement, rtl: view.getComputedStyle(menu).direction === 'rtl',
       });
       menu.style.left = `${left}px`;
       menu.style.top = `${top}px`;

package/src/ui/toast.d.ts

@@ -2,6 +2,9 @@
  * Chrome's toast (cr-toast), bottom left, as chrome://bookmarks shows one
  * after a delete: "Deleted “Research”  Undo". One per page, made by
  * {@link createToast}; a new message replaces the last and restarts the wait.
+ * While the keyboard focus is on Undo, or the pointer is over the toast, it
+ * stays, and the wait starts again in full once they leave (cr-toast stops
+ * its timer on `focusin` and restarts it on `focusout`).
  *
  * It's a manual `popover`, so it shows in the top layer: over anything the
  * page stacks (a content script's toast over a site's own fixed bars), and

package/src/ui/toast.js

@@ -2,6 +2,9 @@
  * Chrome's toast (cr-toast), bottom left, as chrome://bookmarks shows one
  * after a delete: "Deleted “Research”  Undo". One per page, made by
  * {@link createToast}; a new message replaces the last and restarts the wait.
+ * While the keyboard focus is on Undo, or the pointer is over the toast, it
+ * stays, and the wait starts again in full once they leave (cr-toast stops
+ * its timer on `focusin` and restarts it on `focusout`).
  *
  * It's a manual `popover`, so it shows in the top layer: over anything the
  * page stacks (a content script's toast over a site's own fixed bars), and
@@ -75,11 +78,27 @@ export function createToast({ undoLabel = 'Undo', duration = TOAST_MS, undoDurat
   /** @type {(() => unknown) | null} */
   let undoLast = null;
 
+  /** How long the toast showing now stays, once nothing holds it. */
+  let stay = duration;
+
   const hide = () => {
     clearTimeout(timer);
     toast.togglePopover(false);
     undoLast = null;
   };
+  /** Whether the keyboard focus is in the toast (on Undo) or the pointer over it: it stays while either is. */
+  const held = () => toast.matches(':focus-within, :hover');
+  /** The wait starts again, in full, unless the toast is held: as cr-toast's, whose focusout restarts it. */
+  const wait = () => {
+    clearTimeout(timer);
+    if (!held() && toast.matches(':popover-open')) timer = setTimeout(hide, stay);
+  };
+  // cr-toast stops its timer on focusin and restarts it on focusout, so Undo can't go from under
+  // the keyboard; the pointer over it holds it the same way (WCAG 2.2.1, Timing Adjustable).
+  toast.addEventListener('focusin', () => clearTimeout(timer));
+  toast.addEventListener('pointerenter', () => clearTimeout(timer));
+  toast.addEventListener('focusout', () => queueMicrotask(wait));
+  toast.addEventListener('pointerleave', wait);
   undoButton.addEventListener('click', () => {
     const undo = undoLast;
     hide();
@@ -98,7 +117,8 @@ export function createToast({ undoLabel = 'Undo', duration = TOAST_MS, undoDurat
       // Hidden and shown again, so it's the newest in the top layer (over a popover since).
       toast.togglePopover(false);
       toast.togglePopover(true);
-      timer = setTimeout(hide, undo ? undoDuration : duration);
+      stay = undo ? undoDuration : duration;
+      wait();
     },
     hide,
   };