@lo-tek/interfaces 0.37.0 → 0.38.0

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 {

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

@@ -7,11 +7,11 @@ import {
   HostElement,
   isServerControlled,
   languageOf,
+  rememberedId,
   SERVER_CONTROLLED,
   setAttr,
   setFlag,
   setText,
-  uniqueId,
   warnAboutMarkup,
 } from "../../host-element.js"
 import {
@@ -53,6 +53,8 @@ export const LT_SUGGESTION_PARTS = {
   status: "[role='status']",
   /** The hidden field that receives the code of the option the user chose. */
   value: `input.${SUGGESTION_VALUE_CLASS}`,
+  /** The label, which gets `for` from the field's id. */
+  label: "label",
 } as const
 
 const CONTROL_SELECTOR = LT_SUGGESTION_PARTS.control
@@ -270,11 +272,23 @@ export class LtSuggestion extends HostElement {
      * callback also fires during the upgrade, before the children exist.
      */
     if (name === "prefiltered" && this.observer) {
-      // 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.
-      this.announcedCount = this.prefiltered ? this.visible.length : undefined
-      this.filter()
+      /*
+       * After the whole update, as the other repairs: a morph sets the
+       * attribute before it has replaced the options, and the count was
+       * the old list's. And through `repair()`, which filters only a list
+       * that stays open: the filter announces, and a closed list said "One
+       * match" to nobody's search.
+       */
+      queueMicrotask(() => {
+        if (!this.observer) 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.
+        this.announcedCount = this.prefiltered ? this.visible.length : undefined
+        // The whole repair, not the filter alone: the same update can lock
+        // the field, and `repair()` closes the list before it filters.
+        this.sync()
+      })
     }
   }
 
@@ -388,7 +402,7 @@ export class LtSuggestion extends HostElement {
       setAttr(
         labelElement,
         "id",
-        this.rememberedId(labelElement, "lt-suggestion-label"),
+        rememberedId(this.ids, labelElement, "lt-suggestion-label"),
       )
     }
     if (label !== null) setAttr(list, "aria-label", null)
@@ -399,17 +413,6 @@ export class LtSuggestion extends HostElement {
     })
   }
 
-  /** The id an element should have: the one it has, otherwise the one the web component created last. */
-  private rememberedId(element: Element, prefix: string): string {
-    if (element.id) return element.id
-    let id = this.ids.get(element)
-    if (!id) {
-      id = uniqueId(prefix)
-      this.ids.set(element, id)
-    }
-    return id
-  }
-
   /**
    * Fills in the wiring where the markup arrived without it. Only what is
    * missing.
@@ -430,7 +433,7 @@ export class LtSuggestion extends HostElement {
     if (!control.hasAttribute("aria-autocomplete")) {
       setAttr(control, "aria-autocomplete", "list")
     }
-    const label = this.querySelector("label")
+    const label = this.querySelector(LT_SUGGESTION_PARTS.label)
     const root = this.getRootNode() as Document | ShadowRoot
 
     if (label) {
@@ -547,7 +550,7 @@ export class LtSuggestion extends HostElement {
         const wanted = control.getAttribute("aria-controls")
         const free = wanted && !root.getElementById?.(wanted)
         if (free) this.ids.set(list, wanted)
-        setAttr(list, "id", this.rememberedId(list, "lt-suggestion-list"))
+        setAttr(list, "id", rememberedId(this.ids, list, "lt-suggestion-list"))
       }
       if (!control.hasAttribute("aria-controls")) {
         setAttr(control, "aria-controls", list.id)
@@ -567,7 +570,11 @@ export class LtSuggestion extends HostElement {
         this.roledByMe.add(option)
       }
       if (!option.id) {
-        setAttr(option, "id", this.rememberedId(option, "lt-suggestion-option"))
+        setAttr(
+          option,
+          "id",
+          rememberedId(this.ids, option, "lt-suggestion-option"),
+        )
       }
       // From the start, not only when the list closes: otherwise the options
       // the server sent were without it until then, while the rest of the list
@@ -600,6 +607,12 @@ export class LtSuggestion extends HostElement {
       this.writeCode(valueField, this.chosen.value)
     }
 
+    // A field that became `readonly` or `disabled` while the list was open
+    // closes it. Otherwise the repair kept it open, and Escape does nothing in
+    // a locked field. First, so nothing below writes for a list that closes.
+    if (!isServerControlled(this) && this.locked && this.wantOpen)
+      this.setOpen(false)
+
     // An emptied status element gets its text back while the list is open,
     // where the count is what the user is working on. Not otherwise: every
     // patch of the region would announce the old count again. And not when
@@ -616,12 +629,17 @@ export class LtSuggestion extends HostElement {
       setText(status, this.announcedText)
     }
 
-    if (isServerControlled(this)) return
-
-    // A field that became `readonly` or `disabled` while the list was open
-    // closes it. Otherwise the repair kept it open, and Escape does nothing in
-    // a locked field.
-    if (this.locked && this.wantOpen) this.setOpen(false)
+    if (isServerControlled(this)) {
+      /*
+       * The server decides whether the list is open and what is
+       * highlighted, not what matches: an update that changes an open list
+       * is filtered here too. Before, the list showed every option the
+       * server sent, whatever the user had typed, and an emptied list kept
+       * the empty message hidden.
+       */
+      if (this.listElement?.hidden === false) this.filter()
+      return
+    }
 
     if (this.wantOpen !== undefined) {
       /*
@@ -1276,8 +1294,17 @@ export class LtSuggestion extends HostElement {
 
   private handleFocus = (): void => {
     if (this.locked) return
-    this.filter()
+    this.openFiltered()
+  }
+
+  /**
+   * Opens the list, and filters and announces only when it opens. Filtering
+   * first announced "No matches" for a list that `setOpen` then kept closed,
+   * since there was nothing to show.
+   */
+  private openFiltered(): void {
     this.setOpen(true)
+    if (this.wantOpen) this.filter()
   }
 
   private handleFocusOut = (event: FocusEvent): void => {
@@ -1297,10 +1324,7 @@ export class LtSuggestion extends HostElement {
 
     if (event.key === "ArrowDown") {
       event.preventDefault()
-      if (!open) {
-        this.filter()
-        this.setOpen(true)
-      }
+      if (!open) this.openFiltered()
       this.markActive(this.activeIndex + 1)
     } else if (event.key === "ArrowUp") {
       event.preventDefault()
@@ -1308,10 +1332,7 @@ export class LtSuggestion extends HostElement {
       // `aria-activedescendant` pointed to an option in a list the field at the
       // same time reported as closed, and the screen reader announced something
       // that was not on screen.
-      if (!open) {
-        this.filter()
-        this.setOpen(true)
-      }
+      if (!open) this.openFiltered()
       // If nothing is highlighted, arrow up goes to the last one.
       // `activeIndex - 1` would have given the second to last, since nothing
       // highlighted is -1.

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

@@ -3,10 +3,14 @@ import {
   derivedParts,
   HostElement,
   isServerControlled,
+  markWritten,
   SERVER_CONTROLLED,
   setAttr,
   setFlag,
+  stillMarked,
   uniqueId,
+  WRITTEN,
+  warnAboutCopiedMark,
   warnAboutMarkup,
 } from "../../host-element.js"
 export const LT_TABS_TAG = "lt-tabs" as const
@@ -168,6 +172,18 @@ function nameAsReferenced(element: Element): string {
  */
 type Word = { written: string | null; server: string | null }
 
+/**
+ * Whether a morph from the server has been there since the web component
+ * wrote the attribute: the mark it wrote is gone. Only a value that differed
+ * from the server's word was marked (`markWritten`); one that did not has
+ * no mark to lose, and its absence says nothing. Read as a sign of the
+ * server, every unmarked tab in a row of three released a click under
+ * `server-controlled` at once.
+ */
+function markGone(element: Element, name: string, word: Word): boolean {
+  return word.written !== word.server && !stillMarked(element, name)
+}
+
 /**
  * Keyboard behaviour in a tab list, and the wiring when the markup comes
  * without it.
@@ -239,22 +255,34 @@ export class LtTabs extends HostElement {
 
   private observer?: MutationObserver
   /**
-   * The tab the user selected, remembered so a patch cannot take it.
+   * The panel the user's tab points to, remembered so a patch cannot take
+   * the selection.
    *
-   * The node itself, not the index and not `href`. An index is not an
-   * identity: if the server inserts a tab first in the list, the same index
-   * points to something else, and the selection jumps to a tab the user never
-   * pressed.
+   * Not the index and not the node. An index is not an identity: if the
+   * server inserts a tab first in the list, the same index points to
+   * something else. The node is not one either: the links have no id, so
+   * Datastar and idiomorph match them by position, and the node the user
+   * pressed became the inserted tab. The panel's id is the server's and
+   * stays; a tab pointing to another panel is another tab.
    *
-   * A morph keeps the links, since they have no id. If the patch replaces the
-   * link itself, as `innerHTML` does, the tab is a different one, and then
-   * the web component forgets the selection rather than guessing; the address
-   * still has it, see `selectFromAddress`.
+   * Remembered with the link, `chosenTab`.
    *
    * `undefined` means the user has not selected anything yet, and then the
    * server's markup applies.
    */
+  private chosenTarget?: string
+  /**
+   * The link the user pressed, with `chosenTarget`. While it is in the tab
+   * list and points to the same panel, it is the user's tab, also when
+   * another tab points to that panel too. When a morph has turned it into
+   * another tab, or dropped it while it kept other links, the tab that points
+   * to the panel is found. When the links were replaced, none of the row is
+   * left, as `innerHTML` does, and the selection is forgotten rather than
+   * guessed; the address still has it, see `selectFromAddress`.
+   */
   private chosenTab?: HTMLElement
+  /** The tab list as it was when the user's tab was last found. */
+  private chosenRow: HTMLElement[] = []
   /**
    * Roles the web component set itself. Tells a bare tab list, where every
    * link is a tab, from one where the server wrote the roles, where a link
@@ -287,7 +315,7 @@ export class LtTabs extends HostElement {
    * The tab the user clicked under `server-controlled`, until the server
    * answers.
    *
-   * It is not the user's selection in the sense of `chosenTab`: it is never
+   * It is not the user's selection in the sense of `chosenTarget`: it is never
    * restored against the server's word. It only lasts until someone else has
    * touched `aria-selected` or `hidden`, added a tab or a panel, removed the
    * tab, or removed `server-controlled`. Without it, `repair()` read the
@@ -360,6 +388,9 @@ export class LtTabs extends HostElement {
       // disables the selected tab, the tab stop moves to one that can take
       // focus. `alt`, `aria-hidden` and `title` change the name of a tab.
       attributeFilter: [
+        // A morph from the server removes the mark, and the web component
+        // puts it back: the same markup must give the same page.
+        WRITTEN,
         "aria-selected",
         "tabindex",
         "hidden",
@@ -385,7 +416,7 @@ export class LtTabs extends HostElement {
     // `server-controlled` switched on midway: the web component lets go, and
     // the next patch decides.
     if (name === SERVER_CONTROLLED && isServerControlled(this)) {
-      this.chosenTab = undefined
+      this.choose(undefined)
       // What is there now is the starting point. Without this the tab list
       // jumped back to the tab the server last named, before the user chose
       // another. But as when the server answers a click: `aria-selected` the
@@ -426,28 +457,77 @@ export class LtTabs extends HostElement {
     ).filter((tab) => linkTarget(tab) !== null)
   }
 
+  /** Remembers the user's tab: the link, and the panel it points to. */
+  private choose(tab: HTMLElement | undefined): void {
+    this.chosenTab = tab
+    this.chosenTarget = tab ? (linkTarget(tab) ?? undefined) : undefined
+    this.chosenRow = tab ? this.tabs : []
+  }
+
+  /**
+   * Where the user's tab is now, or -1: the link while it points to the same
+   * panel; the tab that points to that panel when a morph has turned the
+   * link into another tab, or dropped it and kept others (the morphers match
+   * links without ids by position, and look ahead when one is removed);
+   * none when the links were replaced, with nothing of the row left.
+   */
+  private chosenIndex(): number {
+    const tabs = this.tabs
+    const link = this.chosenTab
+    if (!link || this.chosenTarget === undefined) return -1
+    const at = tabs.indexOf(link)
+    if (at >= 0 && linkTarget(link) === this.chosenTarget) {
+      this.chosenRow = tabs
+      return at
+    }
+    const morphed = at >= 0 || this.chosenRow.some((tab) => tabs.includes(tab))
+    if (!morphed) return -1
+    const moved = tabs.findIndex((tab) => linkTarget(tab) === this.chosenTarget)
+    if (moved >= 0) {
+      this.chosenTab = tabs[moved]
+      this.chosenRow = tabs
+    }
+    return moved
+  }
+
   /** The server's word about an attribute, against what the web component last wrote. */
   private serverWord(
     memory: WeakMap<Element, Word>,
     element: Element,
-    now: string | null,
+    name: string,
   ): string | null {
+    const now = element.getAttribute(name)
     const known = memory.get(element)
-    if (!known) return now
-    return now !== known.written ? now : known.server
+    if (!known) {
+      warnAboutCopiedMark(this, element)
+      return now
+    }
+    // The server's when the value is another, or when a morph from the
+    // server has been there since the web component wrote it (`WRITTEN`).
+    return now !== known.written || !stillMarked(element, name)
+      ? now
+      : known.server
   }
 
   /** Is there something on a tab or a panel other than what the web component wrote? */
   private touchedByOthers(): boolean {
     return this.tabs.some((tab) => {
       const selected = this.selectedMemory.get(tab)
-      if (!selected || tab.getAttribute("aria-selected") !== selected.written) {
+      if (
+        !selected ||
+        tab.getAttribute("aria-selected") !== selected.written ||
+        markGone(tab, "aria-selected", selected)
+      ) {
         return true
       }
       const panel = this.panelFor(tab)
       if (!panel) return false
       const hidden = this.hiddenMemory.get(panel)
-      return !hidden || panel.getAttribute("hidden") !== hidden.written
+      return (
+        !hidden ||
+        panel.getAttribute("hidden") !== hidden.written ||
+        markGone(panel, "hidden", hidden)
+      )
     })
   }
 
@@ -476,7 +556,9 @@ export class LtTabs extends HostElement {
       // A new, bare tab has said nothing. Had it counted, the click's
       // `aria-selected` was read as the server's, and a later move with
       // `hidden` alone was undone.
-      return known ? now !== known.written : now !== null
+      return known
+        ? now !== known.written || markGone(tab, "aria-selected", known)
+        : now !== null
     })
     this.hiddenMemory = new WeakMap()
     if (serverSpoke) {
@@ -484,28 +566,19 @@ export class LtTabs extends HostElement {
       return
     }
     for (const tab of tabs) {
-      this.selectedMemory.set(tab, {
-        written: tab.getAttribute("aria-selected"),
-        server: null,
-      })
+      const written = tab.getAttribute("aria-selected")
+      this.selectedMemory.set(tab, { written, server: null })
+      markWritten(tab, "aria-selected", written !== null)
     }
   }
 
   private serverSelected(tab: Element): string | null {
-    return this.serverWord(
-      this.selectedMemory,
-      tab,
-      tab.getAttribute("aria-selected"),
-    )
+    return this.serverWord(this.selectedMemory, tab, "aria-selected")
   }
 
   /** The server's word about `hidden` on the panel: the form, or `null` for visible. */
   private serverHidden(panel: Element): string | null {
-    return this.serverWord(
-      this.hiddenMemory,
-      panel,
-      panel.getAttribute("hidden"),
-    )
+    return this.serverWord(this.hiddenMemory, panel, "hidden")
   }
 
   /**
@@ -879,7 +952,7 @@ export class LtTabs extends HostElement {
       this.releasePending()
     }
 
-    if (!this.chosenTab || isServerControlled(this)) {
+    if (this.chosenTarget === undefined || isServerControlled(this)) {
       /*
        * No user selection to restore, so the server's word decides, and it
        * is written out in full: `aria-selected`, the tab stop and `hidden` in
@@ -898,7 +971,8 @@ export class LtTabs extends HostElement {
       return
     }
 
-    const index = this.tabs.indexOf(this.chosenTab)
+    const chosen = this.chosenTarget
+    const index = this.chosenIndex()
     if (index < 0) {
       /*
        * The tab no longer exists. The server has sent something else, and
@@ -917,8 +991,8 @@ export class LtTabs extends HostElement {
        * loads the panel's content or writes the selection to the address
        * would never learn that it moved.
        */
-      const lostPanel = this.panelFor(this.chosenTab)
-      this.chosenTab = undefined
+      const lostPanel = chosen === undefined ? null : this.byFragment(chosen)
+      this.choose(undefined)
       // The server marked a tab itself. Then that applies, and the panels and
       // the tab stop are written to match it, even when nothing else gave the
       // observer another round.
@@ -938,10 +1012,10 @@ export class LtTabs extends HostElement {
         const tab = this.tabs[index]
         this.apply(index)
         if (this.panelFor(tab) === lostPanel) {
-          this.chosenTab = tab
+          this.choose(tab)
           return
         }
-        if (fromAddress >= 0) this.chosenTab = tab
+        if (fromAddress >= 0) this.choose(tab)
         this.showInAddress(index)
         this.notify(index)
       }
@@ -1225,7 +1299,7 @@ export class LtTabs extends HostElement {
     // No memory when the server decides the selection. Without this a
     // selection made while the attribute was there would be restored the
     // moment someone removed it again.
-    if (!isServerControlled(this)) this.chosenTab = tabs[index]
+    if (!isServerControlled(this)) this.choose(tabs[index])
     this.apply(index)
     if (isServerControlled(this)) this.pendingTab = tabs[index]
     this.showInAddress(index)
@@ -1275,6 +1349,7 @@ export class LtTabs extends HostElement {
       const server = this.serverSelected(tab)
       setAttr(tab, "aria-selected", String(chosen))
       this.selectedMemory.set(tab, { written: String(chosen), server })
+      markWritten(tab, "aria-selected", String(chosen) !== server)
       setAttr(tab, "tabindex", i === stop ? "0" : "-1")
 
       const panel = this.panelFor(tab)
@@ -1299,6 +1374,7 @@ export class LtTabs extends HostElement {
         if (written === null) setFlag(panel, "hidden", false)
         else setAttr(panel, "hidden", written)
         this.hiddenMemory.set(panel, { written, server })
+        markWritten(panel, "hidden", written !== server)
       }
       /*
        * Only the selected panel is a tab stop, so Tab from the tab list goes

package/src/components/host-element.ts

@@ -96,6 +96,79 @@ export function setAttr(
   }
 }
 
+/**
+ * The attribute a component marks what it wrote with: the names of the
+ * attributes on the element whose value is the component's, separated by
+ * spaces.
+ *
+ * Some attributes are both the server's and the component's: `aria-invalid`
+ * on a field, `aria-selected` on a tab. To tell the server's word from its
+ * own echo, a component remembered the value it wrote, and read anything
+ * else as the server's. A server that sent the same value was never seen: a
+ * morph does not touch an attribute whose value is already right, and the
+ * component took the server's `aria-invalid="true"` for its own and removed
+ * it. The mark is what a morph does touch. The server never sends it, so a
+ * morph from the server removes it, and an attribute without the mark is the
+ * server's, whatever its value. A script that changes the element without a
+ * morph leaves the mark, and is seen as before, by the value.
+ *
+ * Only what differs from the server's word is marked. A value that is the
+ * server's has nothing to tell apart, and markup that is already right, as
+ * React renders `lt.tabs()` with the state, must not be touched: hydration
+ * reports every attribute it did not render.
+ */
+export const WRITTEN = "data-lt-written"
+
+/**
+ * Marks `name` on `element` as the component's when `mine`, that is, when
+ * what the component wrote differs from the server's word, and removes the
+ * mark otherwise.
+ */
+export function markWritten(
+  element: Element,
+  name: string,
+  mine: boolean,
+): void {
+  const marked = new Set(
+    (element.getAttribute(WRITTEN) ?? "").split(/\s+/).filter(Boolean),
+  )
+  if (mine) marked.add(name)
+  else marked.delete(name)
+  setAttr(
+    element,
+    WRITTEN,
+    marked.size > 0 ? [...marked].sort().join(" ") : null,
+  )
+}
+
+/**
+ * Warns when `element` carries the mark before the component has written on
+ * it: the mark is in the markup it was given, copied into a template from
+ * the browser's developer tools. A morph then never removes it, and the
+ * component takes the server's word for its own echo again. Called where the
+ * component meets the element for the first time; the check cannot wait, so
+ * the warning is not checked again when the page has settled.
+ */
+export function warnAboutCopiedMark(host: Element, element: Element): void {
+  if (!element.hasAttribute(WRITTEN)) return
+  warnAboutMarkup(
+    host,
+    `found ${WRITTEN} in the markup it was given. The browser writes the ` +
+      "attribute to tell the component's own values from the server's; " +
+      "copied into a template, it makes the component take what the " +
+      "server sends for its own. Remove it from the template.",
+    () => true,
+  )
+}
+
+/**
+ * Whether the component's mark for `name` is still on `element`: no morph
+ * from the server has been there since the component wrote it.
+ */
+export function stillMarked(element: Element, name: string): boolean {
+  return (element.getAttribute(WRITTEN) ?? "").split(/\s+/).includes(name)
+}
+
 /**
  * Turns a boolean attribute on or off, without writing when it is already so.
  *
@@ -175,6 +248,26 @@ export function uniqueId(prefix: string): string {
   return `${prefix}-${Math.random().toString(36).slice(2, 9)}`
 }
 
+/**
+ * The id an element should have: the one it has, otherwise the one the
+ * component created for that node before. A morph keeps the node and tears
+ * the id off, and it gets the same one back, so a screen reader does not
+ * follow a reference that changes under it.
+ */
+export function rememberedId(
+  memory: WeakMap<Element, string>,
+  element: Element,
+  prefix: string,
+): string {
+  if (element.id) return element.id
+  let id = memory.get(element)
+  if (!id) {
+    id = uniqueId(prefix)
+    memory.set(element, id)
+  }
+  return id
+}
+
 /**
  * The parts with a role, and those without only when the component set the
  * roles itself.