@lo-tek/interfaces 0.41.0 → 0.43.0

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

@@ -2,12 +2,17 @@ import {
   addClass,
   defineElement,
   HostElement,
+  hasName,
   isServerControlled,
+  nameFromHeading,
+  ownership,
+  restoreModalOpen,
   SERVER_CONTROLLED,
   setAttr,
   setFlag,
   uniqueId,
   warnAboutMarkup,
+  watcher,
 } from "../../host-element.js"
 import {
   DIALOG_BODY_CLASS,
@@ -89,7 +94,23 @@ const upgradeChecked = new WeakSet<HTMLDialogElement>()
 export class LtDialog extends HostElement {
   static observedAttributes = ["open", SERVER_CONTROLLED] as const
 
-  private observer?: MutationObserver
+  private readonly watch = watcher(
+    (records) => {
+      const swapped = records.some(
+        (record) => record.type === "childList" && record.target === this,
+      )
+      if (swapped) this.sync()
+      else this.rewire()
+    },
+    {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      // `aria-label` too: removed, the dialog is named after its title
+      // again, and without it here the dialog was left without a name.
+      attributeFilter: ["class", "id", "aria-labelledby", "aria-label"],
+    },
+  )
   /**
    * A separate observer for `open` on the `<dialog>` itself.
    *
@@ -98,9 +119,12 @@ export class LtDialog extends HostElement {
    * an observer running all of `sync()` there would have seen a host still
    * saying "open" and a dialog that was not modal, and opened it again before
    * `close` was handled. This one does only one thing: it puts the attribute
-   * back on a dialog that is still in the top layer.
+   * back on a dialog that is still in the top layer. It is started again on
+   * a dialog the server replaced.
    */
-  private openObserver?: MutationObserver
+  private readonly openWatch = watcher(() => this.repairOpen(), {
+    attributeFilter: ["open"],
+  })
   private dialogElement?: HTMLDialogElement
   /**
    * What the component last reported, so it reports only when the state
@@ -148,29 +172,13 @@ export class LtDialog extends HostElement {
      * and opened it again before the close was handled. Every write compares
      * first, or the observer would trigger itself.
      */
-    this.observer = new MutationObserver((records) => {
-      const swapped = records.some(
-        (record) => record.type === "childList" && record.target === this,
-      )
-      if (swapped) this.sync()
-      else this.rewire()
-    })
-    this.observer.observe(this, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      // `aria-label` too: removed, the dialog is named after its title
-      // again, and without it here the dialog was left without a name.
-      attributeFilter: ["class", "id", "aria-labelledby", "aria-label"],
-    })
+    this.watch.start(this)
     this.sync()
   }
 
   disconnectedCallback(): void {
-    this.observer?.disconnect()
-    this.observer = undefined
-    this.openObserver?.disconnect()
-    this.openObserver = undefined
+    this.watch.stop()
+    this.openWatch.stop()
     this.dialogElement?.removeEventListener("close", this.handleClose)
     this.dialogElement = undefined
   }
@@ -191,6 +199,13 @@ export class LtDialog extends HostElement {
 
   /** The id the component gave the heading, so a patch gets the same one back. */
   private titleId?: string
+  /**
+   * The `aria-labelledby` the component wrote on the `<dialog>`. Another
+   * value there is the server's, and stays; the component's own follows the
+   * title, so a patch that replaces the title does not leave the name
+   * pointing at an id that is gone.
+   */
+  private readonly own = ownership()
 
   /** The wiring alone, for an attribute record. See the observer. */
   private rewire(): void {
@@ -230,8 +245,7 @@ export class LtDialog extends HostElement {
   private nameless(dialog: HTMLDialogElement): boolean {
     return (
       dialog.childElementCount > 0 &&
-      !dialog.hasAttribute("aria-labelledby") &&
-      !dialog.hasAttribute("aria-label") &&
+      !hasName(dialog) &&
       this.headingOf(dialog) === null
     )
   }
@@ -248,22 +262,27 @@ export class LtDialog extends HostElement {
   private wire(dialog: HTMLDialogElement): void {
     addClass(dialog, DIALOG_CLASS)
 
-    const named = dialog.getAttribute("aria-labelledby")
-    if (named) {
+    const name = nameFromHeading(this.own, this, dialog, () => {
+      const title = this.headingOf(dialog)
+      if (!title) return null
+      addClass(title, DIALOG_TITLE_CLASS)
+      if (!title.id) {
+        this.titleId ??= uniqueId("lt-dialog-title")
+        setAttr(title, "id", this.titleId)
+      }
+      return title.id
+    })
+    if (name === "server") {
       // The attribute can list several ids. The title is the first one that
       // is inside the dialog.
+      const named = (dialog.getAttribute("aria-labelledby") ?? "").trim()
       const root = this.getRootNode() as Document | ShadowRoot
       const title = named
         .split(/\s+/)
         .map((id) => root.getElementById?.(id) ?? null)
         .find((element) => element !== null && dialog.contains(element))
       if (title) addClass(title, DIALOG_TITLE_CLASS)
-      return
-    }
-    if (dialog.hasAttribute("aria-label")) return
-
-    const title = this.headingOf(dialog)
-    if (!title) {
+    } else if (name === "none") {
       warnAboutMarkup(
         this,
         "the dialog has no name: it has no aria-labelledby, no " +
@@ -275,14 +294,7 @@ export class LtDialog extends HostElement {
           return now !== null && this.nameless(now)
         },
       )
-      return
     }
-    addClass(title, DIALOG_TITLE_CLASS)
-    if (!title.id) {
-      this.titleId ??= uniqueId("lt-dialog-title")
-      setAttr(title, "id", this.titleId)
-    }
-    setAttr(dialog, "aria-labelledby", title.id)
   }
 
   private notify(open: boolean, returnValue = ""): void {
@@ -316,14 +328,10 @@ export class LtDialog extends HostElement {
    */
   private repairOpen(): void {
     const dialog = this.dialogElement
-    if (!dialog?.isConnected || !dialog.matches(":modal") || dialog.open) {
-      return
-    }
-
     // The attribute must come back either way: without it `close()` does
     // nothing, and the dialog stayed in the top layer, invisible, with the
     // rest of the page inert.
-    setAttr(dialog, "open", "")
+    if (!dialog || !restoreModalOpen(dialog)) return
     if (!isServerControlled(this)) return
 
     /*
@@ -370,8 +378,7 @@ export class LtDialog extends HostElement {
       // listener stayed attached to a detached node for as long as the host
       // lived.
       if (!dialog) {
-        this.openObserver?.disconnect()
-        this.openObserver = undefined
+        this.openWatch.stop()
         this.dialogElement?.removeEventListener("close", this.handleClose)
         this.dialogElement = undefined
       }
@@ -384,7 +391,8 @@ export class LtDialog extends HostElement {
         // If the component is detached, a morph is building the server's
         // version in a separate tree, and there is nothing to report. An
         // empty element is a region the server has not filled yet.
-        () => this.childElementCount > 0 && this.dialog === null,
+        () => this.dialog === null,
+        { silentWhenEmpty: true },
       )
       return
     }
@@ -397,9 +405,7 @@ export class LtDialog extends HostElement {
       this.dialogElement = dialog
       dialog.addEventListener("close", this.handleClose)
 
-      this.openObserver?.disconnect()
-      this.openObserver = new MutationObserver(() => this.repairOpen())
-      this.openObserver.observe(dialog, { attributeFilter: ["open"] })
+      this.openWatch.start(dialog)
     }
 
     this.repairOpen()

package/src/components/frame/error-summary/lt-error-summary.ts

@@ -2,8 +2,12 @@ import {
   addClass,
   defineElement,
   HostElement,
+  hasName,
+  nameFromHeading,
+  ownership,
   setAttr,
   warnAboutMarkup,
+  watcher,
 } from "../../host-element.js"
 import {
   ERROR_SUMMARY_CLASS,
@@ -82,28 +86,18 @@ export class LtErrorSummary extends HostElement {
   private focusAttempted = false
   /** Where focus was when `hidden` last changed, until the deferred round has run. */
   private focusBefore: Element | null | undefined
-  private observer?: MutationObserver
   /**
-   * The `aria-labelledby` the component wrote on the box, or null. Another
-   * value there is the server'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.
+   * The `aria-labelledby` the component wrote on the box, through
+   * `nameFromHeading()`.
    */
-  private labelledByWritten: string | null = null
-
-  connectedCallback(): void {
-    // One listener on the host, not one per link. The set of links was only
-    // emptied on disconnect, so every link a patch replaced stayed in
-    // memory.
-    this.addEventListener("click", this.handleLinkClick)
-    // The errors come and go while the user corrects them, and `slotchange`
-    // does not fire in plain DOM. The attributes are the ones the component
-    // fills in itself, so a patch that removes them gets them back. Every
-    // write compares first, or the observer would trigger itself.
-    // An id only matters on the heading, which the name points at, and a
-    // name only on the box. The same attributes on a link or a field inside
-    // the box are not ours to follow.
-    this.observer = new MutationObserver((records) => {
+  private readonly own = ownership()
+  /**
+   * An id only matters on the heading, which the name points at, and a name
+   * only on the box. The same attributes on a link or a field inside the box
+   * are not ours to follow.
+   */
+  private readonly watch = watcher(
+    (records) => {
       const relevant = records.some((r) => {
         if (r.attributeName === "id")
           return (r.target as Element).matches(LT_ERROR_SUMMARY_PARTS.title)
@@ -115,8 +109,8 @@ export class LtErrorSummary extends HostElement {
         return true
       })
       if (relevant) this.sync()
-    })
-    this.observer.observe(this, {
+    },
+    {
       childList: true,
       subtree: true,
       attributes: true,
@@ -128,7 +122,19 @@ export class LtErrorSummary extends HostElement {
         "aria-label",
         "id",
       ],
-    })
+    },
+  )
+
+  connectedCallback(): void {
+    // One listener on the host, not one per link. The set of links was only
+    // emptied on disconnect, so every link a patch replaced stayed in
+    // memory.
+    this.addEventListener("click", this.handleLinkClick)
+    // The errors come and go while the user corrects them, and `slotchange`
+    // does not fire in plain DOM. The attributes are the ones the component
+    // fills in itself, so a patch that removes them gets them back. Every
+    // write compares first, or the observer would trigger itself.
+    this.watch.start(this)
     this.sync()
   }
 
@@ -164,8 +170,7 @@ export class LtErrorSummary extends HostElement {
   }
 
   disconnectedCallback(): void {
-    this.observer?.disconnect()
-    this.observer = undefined
+    this.watch.stop()
     this.removeEventListener("click", this.handleLinkClick)
   }
 
@@ -212,32 +217,14 @@ export class LtErrorSummary extends HostElement {
      * nothing, so it counts as missing.
      * `check-accessibility-tree.ts` checks the name a screen reader gets.
      */
-    const labelledBy = this.getAttribute("aria-labelledby")?.trim() || null
-    const label = this.getAttribute("aria-label")?.trim() || null
-    const ours = labelledBy !== null && labelledBy === this.labelledByWritten
-    if (labelledBy !== null && !ours) this.labelledByWritten = null
-    if (title?.id && label === null && (labelledBy === null || ours)) {
-      setAttr(this, "aria-labelledby", title.id)
-      this.labelledByWritten = title.id
-    } else if (ours) {
-      // The heading is gone or lost its id, or the server named the box
-      // with `aria-label`, which `aria-labelledby` would otherwise win over.
-      this.removeAttribute("aria-labelledby")
-      this.labelledByWritten = null
-    }
-    if (title && !title.id && label === null && labelledBy === null)
+    const name = nameFromHeading(this.own, this, this, () => title?.id || null)
+    if (name === "none" && title && !title.id)
       warnAboutMarkup(
         this,
         "has a heading without an id and no name, so it takes focus as an alert a screen reader cannot name. Give the heading an id and the box aria-labelledby pointing at it, as lt.errorSummary({ id }) does.",
         () => {
           const now = this.querySelector(LT_ERROR_SUMMARY_PARTS.title)
-          return (
-            this.isConnected &&
-            now !== null &&
-            !now.id &&
-            !this.getAttribute("aria-label")?.trim() &&
-            !this.getAttribute("aria-labelledby")?.trim()
-          )
+          return this.isConnected && now !== null && !now.id && !hasName(this)
         },
       )
   }