@lo-tek/interfaces 0.42.0 → 0.43.0

package/src/components/frame/session-timeout/lt-session-timeout.ts

@@ -2,11 +2,16 @@ import {
   addClass,
   defineElement,
   HostElement,
+  hasName,
   languageOf,
+  nameFromHeading,
+  ownership,
+  restoreModalOpen,
   setAttr,
   setText,
   uniqueId,
   warnAboutMarkup,
+  watcher,
   whenUpgraded,
 } from "../../host-element.js"
 import {
@@ -218,6 +223,13 @@ export class LtSessionTimeout extends HostElement {
   private expired = false
   /** The id the component gave the heading, so the same one comes back. */
   private titleId?: string
+  /**
+   * The `aria-labelledby` the component wrote on the dialog. Another value
+   * there is the renderer's, and stays; the component's own follows the
+   * heading, so a patch that replaces the heading does not leave the name
+   * pointing at an id that is gone.
+   */
+  private readonly own = ownership()
   /**
    * The dialog the component opened, until `close` has arrived.
    *
@@ -228,8 +240,47 @@ export class LtSessionTimeout extends HostElement {
    * `session-extend`.
    */
   private shownDialog?: HTMLDialogElement
-  /** Watches for `open` disappearing from a dialog in the top layer. See `repairOpen()`. */
-  private openObserver?: MutationObserver
+  /**
+   * Watches the subtree: `open` disappearing from a dialog in the top layer
+   * (see `repairOpen()`), and the role and the name the component wrote.
+   */
+  private readonly watch = watcher(
+    (records) => {
+      // The number is text, and a tick that writes it is no reason to look.
+      const replaced = records.some((record) =>
+        [...record.addedNodes, ...record.removedNodes].some(
+          (node) => node instanceof Element,
+        ),
+      )
+      const attributes = records.some((record) => record.type === "attributes")
+      if (!replaced && !attributes) return
+      this.repairOpen()
+      /*
+       * A morph of the open warning takes the role and the name the component
+       * wrote, since the renderer did not send them, and the screen reader had
+       * a modal dialog without a name until the warning closed. They are
+       * written again while it shows. Such a morph also removes `open`, which
+       * is enough to get here; the wiring's own attributes are watched for a
+       * morph that leaves `open` alone.
+       */
+      // A heading the renderer replaced, too.
+      const dialog = this.dialog
+      if (dialog?.matches(":modal")) this.wire(dialog)
+    },
+    {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: [
+        "open",
+        "role",
+        "class",
+        "id",
+        "aria-labelledby",
+        "aria-label",
+      ],
+    },
+  )
 
   /** Seconds without activity before the warning appears. */
   get warnAt(): number {
@@ -270,31 +321,7 @@ export class LtSessionTimeout extends HostElement {
      * dialog, without the component having to hold on to a particular node.
      */
     this.addEventListener("close", this.handleClose, true)
-    this.openObserver = new MutationObserver(() => {
-      this.repairOpen()
-      /*
-       * A morph of the open warning takes the role and the name the component
-       * wrote, since the renderer did not send them, and the screen reader had
-       * a modal dialog without a name until the warning closed. They are
-       * written again while it shows. Such a morph also removes `open`, which
-       * is enough to get here; the wiring's own attributes are watched for a
-       * morph that leaves `open` alone.
-       */
-      const dialog = this.dialog
-      if (dialog?.matches(":modal")) this.wire(dialog)
-    })
-    this.openObserver.observe(this, {
-      subtree: true,
-      attributes: true,
-      attributeFilter: [
-        "open",
-        "role",
-        "class",
-        "id",
-        "aria-labelledby",
-        "aria-label",
-      ],
-    })
+    this.watch.start(this)
     this.ticker = window.setInterval(() => this.tick(), 1000)
     this.validate()
 
@@ -321,8 +348,7 @@ export class LtSessionTimeout extends HostElement {
       )
     }
     this.removeEventListener("close", this.handleClose, true)
-    this.openObserver?.disconnect()
-    this.openObserver = undefined
+    this.watch.stop()
     if (this.ticker) window.clearInterval(this.ticker)
     this.ticker = undefined
   }
@@ -380,15 +406,36 @@ export class LtSessionTimeout extends HostElement {
       this,
       "found no <dialog>. The warning cannot be shown, and the " +
         "session expires without warning.",
-      () => this.childElementCount > 0 && this.dialog === null,
+      () => this.dialog === null,
+      { silentWhenEmpty: true },
     )
     this.validateParts()
   }
 
+  /** Says so when the dialog has no name, once the page has settled. */
+  private warnNameless(): void {
+    warnAboutMarkup(
+      this,
+      "the dialog has no name: it has no aria-labelledby, no aria-label " +
+        "and no heading, so a screen reader announces the warning " +
+        "without saying what it is about. Give it a heading, or " +
+        "aria-label on the <dialog>.",
+      () => {
+        const now = this.dialog
+        return (
+          now !== null &&
+          !hasName(now) &&
+          !now.querySelector(LT_SESSION_TIMEOUT_PARTS.title)
+        )
+      },
+    )
+  }
+
   /** The parts inside the dialog. Each of them makes the warning worse when missing. */
   private validateParts(): void {
     const dialog = this.dialog
     if (!dialog) return
+    this.warnNameless()
     warnAboutMarkup(
       this,
       `found no .${SESSION_TIMEOUT_COUNT_CLASS} in the dialog. The user cannot see how much time is left.`,
@@ -418,19 +465,16 @@ export class LtSessionTimeout extends HostElement {
   private wire(dialog: HTMLDialogElement): void {
     addClass(dialog, SESSION_TIMEOUT_DIALOG_CLASS)
     if (!dialog.hasAttribute("role")) setAttr(dialog, "role", "alertdialog")
-    if (
-      dialog.hasAttribute("aria-labelledby") ||
-      dialog.hasAttribute("aria-label")
-    ) {
-      return
-    }
-    const title = dialog.querySelector(LT_SESSION_TIMEOUT_PARTS.title)
-    if (!title) return
-    if (!title.id) {
-      this.titleId ??= uniqueId("lt-session-timeout-title")
-      setAttr(title, "id", this.titleId)
-    }
-    setAttr(dialog, "aria-labelledby", title.id)
+    const name = nameFromHeading(this.own, this, dialog, () => {
+      const title = dialog.querySelector(LT_SESSION_TIMEOUT_PARTS.title)
+      if (!title) return null
+      if (!title.id) {
+        this.titleId ??= uniqueId("lt-session-timeout-title")
+        setAttr(title, "id", this.titleId)
+      }
+      return title.id
+    })
+    if (name === "none") this.warnNameless()
   }
 
   /**
@@ -446,9 +490,7 @@ export class LtSessionTimeout extends HostElement {
    * The same rule as in `<lt-dialog>`.
    */
   private repairOpen(): void {
-    const dialog = this.dialog
-    if (!dialog?.matches(":modal") || dialog.open) return
-    setAttr(dialog, "open", "")
+    restoreModalOpen(this.dialog)
   }
 
   private registerActivity = (): void => {

package/src/components/frame/suggestion/lt-suggestion.ts

@@ -7,12 +7,14 @@ import {
   HostElement,
   isServerControlled,
   languageOf,
+  ownership,
   rememberedId,
   SERVER_CONTROLLED,
   setAttr,
   setFlag,
   setText,
   warnAboutMarkup,
+  watcher,
 } from "../../host-element.js"
 import {
   SUGGESTION_EMPTY_CLASS,
@@ -119,7 +121,40 @@ export class LtSuggestion extends HostElement {
     ...COUNT_ATTRIBUTES,
   ] as const
 
-  private observer?: MutationObserver
+  private readonly watch = watcher(() => this.sync(), {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: [
+      "hidden",
+      "aria-expanded",
+      "aria-selected",
+      "aria-activedescendant",
+      // The wiring the web component fills in when the markup arrived without it.
+      "role",
+      "id",
+      "for",
+      "aria-controls",
+      "autocomplete",
+      "aria-autocomplete",
+      "class",
+      // The value field's `value` is an attribute, and a morph can write
+      // the server's empty value over the code the user chose.
+      "value",
+      // `form` on the field picks which form the reset belongs to.
+      "form",
+      // A field that becomes `readonly` or `disabled` must close the list.
+      "readonly",
+      "disabled",
+      "aria-disabled",
+      // The list sits in the top layer. A morph that removes `popover`
+      // closes the popover, and the web component sets it back.
+      "popover",
+      // The list's name, from the label.
+      "aria-labelledby",
+      "aria-label",
+    ],
+  })
   private control?: HTMLInputElement
   private list?: HTMLElement
   private empty?: HTMLElement
@@ -128,7 +163,7 @@ export class LtSuggestion extends HostElement {
   /** The ids the web component created, per node, so a patch gets the same ones back. */
   private readonly ids = new WeakMap<Element, string>()
   /** The roles the web component set. See `derivedParts`. */
-  private readonly roledByMe = new WeakSet<Element>()
+  private readonly roledByMe = ownership()
   /** True while the web component dispatches events, so it does not answer itself. */
   private choosing = false
   /**
@@ -155,17 +190,12 @@ export class LtSuggestion extends HostElement {
   private writtenCode?: string
   /** The form listened to for `reset`. Follows the field, which a patch can move. */
   private boundForm?: HTMLFormElement | null
-  /** The `for` the web component wrote on the label. */
-  private readonly forByMe = new WeakMap<Element, string>()
   /**
-   * The name the web component gave the list, per list: `aria-labelledby`
-   * pointing to the label, or `aria-label` with its text. If something else
-   * is there, the server wrote it, and it stays.
+   * What the web component wrote on the label (`for`) and the list (its
+   * name: `aria-labelledby` pointing to the label, or `aria-label` with its
+   * text). Something else there is the server's, and stays.
    */
-  private readonly listNameByMe = new WeakMap<
-    Element,
-    { name: "aria-labelledby" | "aria-label"; value: string }
-  >()
+  private readonly own = ownership()
   /**
    * Labels where the server wrote a `for` pointing to another id. Reported
    * once; the memory is not reset, since the rewritten `for` cannot be told
@@ -214,41 +244,7 @@ export class LtSuggestion extends HostElement {
      * The attributes are included, not just the children. Every write below
      * compares first, or the observer would trigger itself forever.
      */
-    this.observer = new MutationObserver(() => this.sync())
-    this.observer.observe(this, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: [
-        "hidden",
-        "aria-expanded",
-        "aria-selected",
-        "aria-activedescendant",
-        // The wiring the web component fills in when the markup arrived without it.
-        "role",
-        "id",
-        "for",
-        "aria-controls",
-        "autocomplete",
-        "aria-autocomplete",
-        "class",
-        // The value field's `value` is an attribute, and a morph can write
-        // the server's empty value over the code the user chose.
-        "value",
-        // `form` on the field picks which form the reset belongs to.
-        "form",
-        // A field that becomes `readonly` or `disabled` must close the list.
-        "readonly",
-        "disabled",
-        "aria-disabled",
-        // The list sits in the top layer. A morph that removes `popover`
-        // closes the popover, and the web component sets it back.
-        "popover",
-        // The list's name, from the label.
-        "aria-labelledby",
-        "aria-label",
-      ],
-    })
+    this.watch.start(this)
     this.sync()
     window.addEventListener("resize", this.reposition)
     window.addEventListener("scroll", this.reposition, true)
@@ -269,10 +265,10 @@ export class LtSuggestion extends HostElement {
     /*
      * The attribute can come and go while the page is alive, and then the
      * list must be corrected at once rather than on the next keystroke.
-     * `this.observer` signals that the web component is in the document: the
+     * `this.watch.watching` signals that the web component is in the document: the
      * callback also fires during the upgrade, before the children exist.
      */
-    if (name === "prefiltered" && this.observer) {
+    if (name === "prefiltered" && this.watch.watching) {
       /*
        * After the whole update, as the other repairs: a morph sets the
        * attribute before it has replaced the options, and the count was
@@ -281,7 +277,7 @@ export class LtSuggestion extends HostElement {
        * match" to nobody's search.
        */
       queueMicrotask(() => {
-        if (!this.observer) return
+        if (!this.watch.watching) return
         // The count present when the attribute is set is the starting point,
         // and nothing to announce. Without this the first change afterwards
         // was taken as the starting point, and was lost.
@@ -366,13 +362,12 @@ export class LtSuggestion extends HostElement {
    * gets the label's text as `aria-label`, without the field's value.
    */
   private nameList(list: HTMLElement, control: HTMLInputElement): void {
-    const mine = this.listNameByMe.get(list)
     const labelledby = list.getAttribute("aria-labelledby")
     const label = list.getAttribute("aria-label")
     const fromServer =
       (labelledby !== null &&
-        !(mine?.name === "aria-labelledby" && mine.value === labelledby)) ||
-      (label !== null && !(mine?.name === "aria-label" && mine.value === label))
+        this.own.written(list, "aria-labelledby") !== labelledby) ||
+      (label !== null && this.own.written(list, "aria-label") !== label)
     if (fromServer) return
 
     const labelElement =
@@ -388,14 +383,13 @@ export class LtSuggestion extends HostElement {
         )
           text += node.textContent ?? ""
       text = text.replace(/\s+/g, " ").trim()
-      if (labelledby !== null) setAttr(list, "aria-labelledby", null)
+      // One name at a time is the component's: writing one releases the other.
+      this.own.release(list, "aria-labelledby")
       if (text === "") {
-        if (label !== null) setAttr(list, "aria-label", null)
-        this.listNameByMe.delete(list)
+        this.own.release(list, "aria-label")
         return
       }
-      setAttr(list, "aria-label", text)
-      this.listNameByMe.set(list, { name: "aria-label", value: text })
+      this.own.write(list, "aria-label", text)
       return
     }
 
@@ -406,12 +400,8 @@ export class LtSuggestion extends HostElement {
         rememberedId(this.ids, labelElement, "lt-suggestion-label"),
       )
     }
-    if (label !== null) setAttr(list, "aria-label", null)
-    setAttr(list, "aria-labelledby", labelElement.id)
-    this.listNameByMe.set(list, {
-      name: "aria-labelledby",
-      value: labelElement.id,
-    })
+    this.own.release(list, "aria-label")
+    this.own.write(list, "aria-labelledby", labelElement.id)
   }
 
   /**
@@ -448,12 +438,11 @@ export class LtSuggestion extends HostElement {
         if (
           current !== null &&
           current !== control.id &&
-          current !== this.forByMe.get(label)
+          current !== this.own.written(label, "for")
         ) {
           this.wrongFor.add(label)
         }
-        setAttr(label, "for", control.id)
-        this.forByMe.set(label, control.id)
+        this.own.write(label, "for", control.id)
       }
       warnAboutMarkup(
         this,
@@ -567,8 +556,7 @@ export class LtSuggestion extends HostElement {
     for (const option of this.options) {
       addClass(option, SUGGESTION_OPTION_CLASS)
       if (!option.hasAttribute("role")) {
-        setAttr(option, "role", "option")
-        this.roledByMe.add(option)
+        this.roledByMe.write(option, "role", "option")
       }
       if (!option.id) {
         setAttr(
@@ -697,8 +685,7 @@ export class LtSuggestion extends HostElement {
     window.removeEventListener("resize", this.reposition)
     window.removeEventListener("scroll", this.reposition, true)
     this.removeEventListener("focusout", this.handleFocusOut)
-    this.observer?.disconnect()
-    this.observer = undefined
+    this.watch.stop()
     this.unbind()
   }
 
@@ -859,9 +846,8 @@ export class LtSuggestion extends HostElement {
           "to, and neither filtering nor the arrow keys work.",
         // An empty element is a region the server has not filled yet, and not
         // an error in the markup.
-        () =>
-          this.childElementCount > 0 &&
-          this.querySelector(CONTROL_SELECTOR) === null,
+        () => this.querySelector(CONTROL_SELECTOR) === null,
+        { silentWhenEmpty: true },
       )
       // The field is gone. Firefox sends no `focusout` when the focused node is
       // removed, so the list would otherwise stay open without a field.