@arraypress/extension-kit 1.10.0 → 1.11.1

package/src/ui/text-dialog.js

@@ -4,8 +4,9 @@
  * folder's name (`askText`); several, as chrome://settings/searchEngines asks
  * for a site search (`askFields`). The action button stays disabled while a
  * field is blank or isn't valid, with the reason under that field. Enter
- * means the action button, Esc and Cancel cancel, and the focus goes back to
- * what opened it. The page needs no markup: the dialog (`#text-dialog`) is
+ * means the action button, Esc and Cancel cancel (as does the dialog being
+ * closed any other way), and the focus goes back to what opened it. A reason
+ * is announced as it appears, and its field marked invalid. The page needs no markup: the dialog (`#text-dialog`) is
  * made the first time, its fields each time it's asked.
  *
  * @module ui/text-dialog
@@ -178,7 +179,7 @@ function fieldFor(doc, request, only) {
   input.value = typeof request.value === 'string' ? request.value : '';
   if (request.placeholder) input.placeholder = request.placeholder;
   if (request.maxLength !== undefined) input.maxLength = request.maxLength;
-  const error = element(doc, 'span', { id: ids.error, class: 'hint error' });
+  const error = element(doc, 'span', { id: ids.error, class: 'hint error', 'aria-live': 'polite' });
   error.hidden = true;
   const hint = element(doc, 'span', { id: ids.hint, class: 'hint secondary' });
   hint.hidden = true;
@@ -226,6 +227,9 @@ export function askFields({
     const { reason } = waiting ? { reason: '' } : checkText(input.value, request.validate);
     error.textContent = reason;
     error.hidden = !reason;
+    // Said to a screen reader as it appears, and the field marked (the stylesheet turns its underline red).
+    if (reason) input.setAttribute('aria-invalid', 'true');
+    else input.removeAttribute('aria-invalid');
     hint.textContent = waiting ? request.waiting ?? '' : typeof request.hint === 'function' ? request.hint(input.value) : request.hint ?? '';
     hint.hidden = !hint.textContent;
   };
@@ -291,6 +295,9 @@ export function askFields({
       event.preventDefault();
       settle(null);
     }, { signal });
+    // Closed any other way (the browser's own close after a second Esc, another script): cancelled, not left unanswered.
+    // (The event comes a task after the closing: one from the ask before this, already answered, finds the dialog open again.)
+    parts.dialog.addEventListener('close', () => { if (!parts.dialog.open) settle(null); }, { signal });
 
     parts.dialog.showModal();
     // The first field still to fill in, or the first, its text selected to type over.

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();
@@ -93,10 +112,13 @@ export function createToast({ undoLabel = 'Undo', duration = TOAST_MS, undoDurat
       text.textContent = message;
       undoButton.hidden = !undo;
       undoLast = undo;
+      // Taken off the page since (a single-page site replaced its body): put back, or showing it would throw.
+      if (!toast.isConnected) (root?.isConnected === false ? doc.body : root ?? doc.body).append(toast);
       // 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,
   };