@lo-tek/interfaces 0.37.0 → 0.39.0

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

@@ -30,7 +30,8 @@ export const LT_ERROR_SUMMARY_PARTS = {
  * class, `role="alert"` and `tabindex="-1"` on the box, and the component
  * leaves them alone. When the markup comes from a template without
  * JavaScript, the component fills in those three and the class on the
- * heading, and sets them back when a patch removes them. The component
+ * heading, and sets them back when a patch removes them. Either way, a box
+ * without a name gets `aria-labelledby` pointing at its heading. The component
  * creates no nodes: it used to, and then the heading disappeared on the
  * first morph in Datastar and never came back.
  *
@@ -53,6 +54,7 @@ export const LT_ERROR_SUMMARY_PARTS = {
  * </lt-error-summary>
  * ```
  */
+
 /** Decodes a fragment, and returns it untouched if it is not valid. */
 function decodeFragment(fragment: string): string {
   try {
@@ -78,7 +80,16 @@ export class LtErrorSummary extends HostElement {
    * live validation patched the list.
    */
   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.
+   */
+  private labelledByWritten: string | null = null
 
   connectedCallback(): void {
     // One listener on the host, not one per link. The set of links was only
@@ -89,21 +100,67 @@ export class LtErrorSummary extends HostElement {
     // 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.observer = new MutationObserver(() => this.sync())
+    // 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) => {
+      const relevant = records.some((r) => {
+        if (r.attributeName === "id")
+          return (r.target as Element).matches(LT_ERROR_SUMMARY_PARTS.title)
+        if (
+          r.attributeName === "aria-label" ||
+          r.attributeName === "aria-labelledby"
+        )
+          return r.target === this
+        return true
+      })
+      if (relevant) this.sync()
+    })
     this.observer.observe(this, {
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ["class", "role", "tabindex"],
+      attributeFilter: [
+        "class",
+        "role",
+        "tabindex",
+        "aria-labelledby",
+        "aria-label",
+        "id",
+      ],
     })
     this.sync()
   }
 
   attributeChangedCallback(): void {
-    // The server can send the box hidden and later only remove `hidden` on
-    // the same node. Without this, a summary that just became visible never
-    // gets focus, and that is the whole reason the component exists.
-    if (this.isConnected) this.sync()
+    /*
+     * The server can send the box hidden and later only remove `hidden` on
+     * the same node. Without this, a summary that just became visible never
+     * gets focus, and that is the whole reason the component exists.
+     *
+     * A microtask later, not now. A morph sets `hidden` in its attribute
+     * pass, before it updates the children; focus moved then made the box
+     * the focused element, and idiomorph with `ignoreActiveValue` leaves the
+     * children of the focused element as they were, so the new errors never
+     * arrived. Found by the code review of PR 240.
+     */
+    // Where focus was when the box was shown. React gives it back there
+    // after the commit, and the box takes it anyway; a script that moves it
+    // somewhere else in the same turn has decided, and the box leaves it.
+    this.focusBefore ??= document.activeElement
+    // Hidden: let go of focus now, in the morph's attribute pass, so the
+    // morph still updates the content (see `sync()`).
+    if (this.hidden) this.blurInside()
+    queueMicrotask(() => {
+      if (this.isConnected) this.sync()
+      this.focusBefore = undefined
+    })
+  }
+
+  /** Takes focus off the box, or off a link in it. */
+  private blurInside(): void {
+    const focused = (this.getRootNode() as Document | ShadowRoot).activeElement
+    if (focused instanceof HTMLElement && this.contains(focused)) focused.blur()
   }
 
   disconnectedCallback(): void {
@@ -140,6 +197,49 @@ export class LtErrorSummary extends HostElement {
 
     const title = this.querySelector(LT_ERROR_SUMMARY_PARTS.title)
     if (title) addClass(title, ERROR_SUMMARY_TITLE_CLASS)
+
+    /*
+     * The box takes focus, so it needs a name: without one a screen reader
+     * says only "alert" when the focus lands, and the heading is what says
+     * how many errors there are. The template writes the heading's id and
+     * the box's `aria-labelledby`, as it writes `for` and `id` on a field;
+     * `lt.errorSummary({ id })` writes both. The component never writes an
+     * id: Datastar and idiomorph replace an element whose id the server did
+     * not send, so an id from the component gave the heading a new one on
+     * every patch. When the heading has an id and the box no name, the
+     * component points `aria-labelledby` at it, and follows a heading a
+     * patch has replaced. A blank `aria-label` or `aria-labelledby` names
+     * 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)
+      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()
+          )
+        },
+      )
   }
 
   private sync(): void {
@@ -160,6 +260,15 @@ export class LtErrorSummary extends HostElement {
     if (this.hidden) {
       this.hasFocused = false
       this.focusAttempted = false
+      /*
+       * A hidden box gives up focus. HTML's focus fixup rule moves focus
+       * off an element that is no longer rendered; Chromium does it at
+       * once, Firefox and WebKit left it on the hidden box. idiomorph leaves
+       * the content of the focused element as it was, so the next errors
+       * the server sent never reached the box, which then showed an empty
+       * heading and list. Found by the model test.
+       */
+      this.blurInside()
     }
 
     if (links.length === 0) {
@@ -218,6 +327,11 @@ export class LtErrorSummary extends HostElement {
       const active = document.activeElement
       const nobodyTyping = !active || active === document.body
       if (this.focusAttempted && !nobodyTyping) return
+      const movedByScript =
+        this.focusBefore !== undefined &&
+        active !== this.focusBefore &&
+        !nobodyTyping
+      if (movedByScript) return
       const root = this.getRootNode() as Document | ShadowRoot
 
       this.focusAttempted = true

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

@@ -4,9 +4,13 @@ import {
   addClass,
   defineElement,
   HostElement,
+  markWritten,
   setAttr,
   setFlag,
+  stillMarked,
   uniqueId,
+  WRITTEN,
+  warnAboutCopiedMark,
   warnAboutMarkup,
 } from "../../host-element.js"
 import { computeFieldAttributes } from "./field-core.js"
@@ -47,6 +51,9 @@ function readMarker(value: string | null | undefined): Marker | undefined {
  * back.
  */
 const DERIVED_ATTRIBUTES = [
+  // A morph from the server removes the mark, and the component puts it
+  // back: the same markup must give the same page.
+  WRITTEN,
   "class",
   "for",
   "id",
@@ -325,35 +332,42 @@ export class LtField extends HostElement {
     const known = this.labelMemory.get(label)
     if (!known) return now
 
+    const spoke = (name: string, changed: boolean) =>
+      changed || !stillMarked(label, name)
     return {
-      required:
-        now.required !== known.written.required
-          ? now.required
-          : known.server.required,
-      optional:
-        now.optional !== known.written.optional
-          ? now.optional
-          : known.server.optional,
+      required: spoke("data-required", now.required !== known.written.required)
+        ? now.required
+        : known.server.required,
+      optional: spoke("data-optional", now.optional !== known.written.optional)
+        ? now.optional
+        : known.server.optional,
     }
   }
 
   private serverWord(control: Element, now: ControlWord): ControlWord {
     const known = this.memory.get(control)
-    if (!known) return now
+    if (!known) {
+      warnAboutCopiedMark(this, control)
+      return now
+    }
 
+    // The server's when the value is another, or when a morph from the
+    // server has been there since the component wrote it (`WRITTEN`).
+    const spoke = (name: string, changed: boolean) =>
+      changed || !stillMarked(control, name)
     return {
-      invalid:
-        now.invalid !== known.written.invalid
-          ? now.invalid
-          : known.server.invalid,
-      describedBy:
-        now.describedBy !== known.written.describedBy
-          ? now.describedBy
-          : known.server.describedBy,
-      disabled:
-        now.disabled !== known.written.disabled
-          ? now.disabled
-          : known.server.disabled,
+      invalid: spoke("aria-invalid", now.invalid !== known.written.invalid)
+        ? now.invalid
+        : known.server.invalid,
+      describedBy: spoke(
+        "aria-describedby",
+        now.describedBy !== known.written.describedBy,
+      )
+        ? now.describedBy
+        : known.server.describedBy,
+      disabled: spoke("disabled", now.disabled !== known.written.disabled)
+        ? now.disabled
+        : known.server.disabled,
     }
   }
 
@@ -683,11 +697,22 @@ export class LtField extends HostElement {
       }
       setAttr(label, "data-required", computed.label["data-required"])
       setAttr(label, "data-optional", computed.label["data-optional"])
+      const writtenLabel: LabelWord = {
+        required: computed.label["data-required"] ?? null,
+        optional: computed.label["data-optional"] !== undefined,
+      }
+      markWritten(
+        label,
+        "data-required",
+        writtenLabel.required !== serverLabel.required,
+      )
+      markWritten(
+        label,
+        "data-optional",
+        writtenLabel.optional !== serverLabel.optional,
+      )
       this.labelMemory.set(label, {
-        written: {
-          required: computed.label["data-required"] ?? null,
-          optional: computed.label["data-optional"] !== undefined,
-        },
+        written: writtenLabel,
         server: serverLabel,
       })
       setAttr(label, "aria-disabled", computed.label["aria-disabled"])
@@ -714,12 +739,24 @@ export class LtField extends HostElement {
     // alongside it: a real `disabled` is already visible to assistive
     // technology, and `computeFieldAttributes` only writes it on the label.
     setFlag(control, "disabled", disabled)
+    const written: ControlWord = {
+      invalid: ariaInvalid,
+      describedBy: computed.control["aria-describedby"] ?? null,
+      disabled,
+    }
+    markWritten(control, "aria-invalid", written.invalid !== server.invalid)
+    markWritten(
+      control,
+      "aria-describedby",
+      written.describedBy !== server.describedBy,
+    )
+    markWritten(control, "disabled", written.disabled !== server.disabled)
 
     this.memory.set(control, {
       written: {
-        invalid: ariaInvalid,
-        describedBy: computed.control["aria-describedby"] ?? null,
-        disabled,
+        invalid: written.invalid,
+        describedBy: written.describedBy,
+        disabled: written.disabled,
       },
       server,
     })

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

@@ -196,7 +196,8 @@ export class LtPopover extends HostElement {
      * user or the server has said so. If it is gone while the user opened it, the
      * morph took it, and then it comes back.
      */
-    if (this.wantsOpen && !this.open && !isServerControlled(this)) {
+    const repairing = this.wantsOpen && !this.open && !isServerControlled(this)
+    if (repairing) {
       /*
        * Wait until the whole patch has landed before opening the popover again.
        *
@@ -206,10 +207,16 @@ export class LtPopover extends HostElement {
        * was taking over the state, and the popover stayed open afterwards.
        * `queueMicrotask` runs after the whole patch is done, and the condition is
        * checked again there.
+       *
+       * Until then the panel stays as it is: closing it while the repair waits
+       * took the focus from a button in it to the trigger on every patch.
+       * When the repair is called off, `sync()` closes the panel for real.
        */
       queueMicrotask(() => {
-        if (!this.isConnected || isServerControlled(this)) return
-        if (this.wantsOpen && !this.open) setFlag(this, "open", true)
+        if (!this.isConnected) return
+        if (!isServerControlled(this) && this.wantsOpen && !this.open)
+          setFlag(this, "open", true)
+        else this.sync()
       })
     }
 
@@ -322,16 +329,30 @@ export class LtPopover extends HostElement {
       this.panel = panel
     }
 
+    // Shown while a repair waits, so the button says the same as the panel.
+    const shown = this.open || repairing
+
     // Written by the component, and set again if a patch took it.
-    setAttr(trigger, "aria-expanded", String(this.open))
+    setAttr(trigger, "aria-expanded", String(shown))
 
-    if (this.open) {
+    if (shown) {
       if (!panel.matches(":popover-open")) panel.showPopover()
       this.reposition()
       document.addEventListener("click", this.handleOutsideClick, true)
       document.addEventListener("keydown", this.handleKeydown)
     } else {
-      if (panel.matches(":popover-open")) panel.hidePopover()
+      if (panel.matches(":popover-open")) {
+        /*
+         * Focus in the panel goes back to the button, whatever closed it:
+         * `hide()`, `toggle()`, the server taking `open`. Otherwise it stays
+         * on a button that is no longer shown, and the next key press starts
+         * at the top of the page. Escape did this alone before. Focus
+         * elsewhere, such as a field the user clicked outside, stays.
+         */
+        const inside = panel.contains(document.activeElement)
+        panel.hidePopover()
+        if (inside) trigger.focus()
+      }
       document.removeEventListener("click", this.handleOutsideClick, true)
       document.removeEventListener("keydown", this.handleKeydown)
     }
@@ -397,7 +418,13 @@ export class LtPopover extends HostElement {
   }
 
   private handleTriggerClick = (): void => {
+    const closing = this.open
     this.toggle()
+    // Safari gives a clicked button no focus: focus in the panel went to
+    // `<body>` with the click, before the panel closed, and `sync()` did not
+    // see it there. The other browsers have given the button focus already.
+    if (closing && document.activeElement === document.body)
+      this.triggerElement?.focus()
   }
 
   private handlePanelToggle = (event: Event): void => {
@@ -529,18 +556,22 @@ export class LtPopover extends HostElement {
     )
   }
 
-  /** Opens the panel. */
+  /**
+   * Opens the panel. Through the setter also when it is open already, as
+   * when the server sent `open`: the call is the app's message, and without
+   * it the next patch without `open` closed the panel.
+   */
   show(): void {
-    if (this.open) return
+    const was = this.open
     this.open = true
-    this.emit(true)
+    if (!was) this.emit(true)
   }
 
-  /** Closes the panel. */
+  /** Closes the panel. Through the setter also when it is closed, as `show()`. */
   hide(): void {
-    if (!this.open) return
+    const was = this.open
     this.open = false
-    this.emit(false)
+    if (was) this.emit(false)
   }
 
   /** Opens or closes. */

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

@@ -270,11 +270,30 @@ 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())
+    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"],
+      attributeFilter: [
+        "open",
+        "role",
+        "class",
+        "id",
+        "aria-labelledby",
+        "aria-label",
+      ],
     })
     this.ticker = window.setInterval(() => this.tick(), 1000)
     this.validate()
@@ -509,7 +528,16 @@ export class LtSessionTimeout extends HostElement {
     // dialog has been replaced in the meantime, it never comes, and then the
     // memory is released.
     const current = this.dialog
+    /*
+     * The renderer replaced the dialog while the warning showed, as
+     * `innerHTML` does: still open when it went, so replaced, not closed.
+     * Decided in the tick that opens the new one, below; kept in a field, it
+     * outlived a `reset()` in between, and the next warning, minutes later,
+     * sent no `session-warn`.
+     */
+    let continuing = false
     if (this.shownDialog && this.shownDialog !== current) {
+      continuing = this.shownDialog.open
       this.shownDialog = undefined
     }
     if (this.shownDialog && !this.shownDialog.open) return
@@ -532,7 +560,7 @@ export class LtSessionTimeout extends HostElement {
     if (elapsed < this.warnAt && !dialog?.open) return
 
     if (!dialog?.open) {
-      this.openDialog(left)
+      this.openDialog(left, continuing)
       return
     }
     /*
@@ -577,7 +605,7 @@ export class LtSessionTimeout extends HostElement {
     setText(live, sentence.replace(/\s+/g, " ").trim())
   }
 
-  private openDialog(left: number): void {
+  private openDialog(left: number, continuing = false): void {
     const dialog = this.dialog
     if (!dialog) {
       // By now the page has long since settled, so an empty element is not a
@@ -606,7 +634,13 @@ export class LtSessionTimeout extends HostElement {
     // field is in the page, as `<lt-error-summary>` also warns about. The field
     // can be on either side of the shadow boundary from the component, so only
     // the descent finds it.
-    this.previousFocus = deepActiveElement()
+    /*
+     * A warning that was showing when the renderer replaced the dialog, as
+     * `innerHTML` does, never closed: the user is still being warned. Focus
+     * goes back to where it was before that warning, not to `<body>`, where
+     * it is now, and `session-warn` has been sent already.
+     */
+    if (!continuing) this.previousFocus = deepActiveElement()
     /*
      * The text must be in place before the dialog opens, since `alertdialog` is
      * announced as it appears. The number in the paragraph is `aria-hidden`, so
@@ -623,7 +657,7 @@ export class LtSessionTimeout extends HostElement {
     dialog.returnValue = ""
     dialog.showModal()
     this.shownDialog = dialog
-    this.emit("session-warn")
+    if (!continuing) this.emit("session-warn")
   }
 
   private closeDialog(reason: string): void {