@webjsdev/ui 0.3.13 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "type": "module",
   "description": "The AI-first component library for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Class-helper functions for visuals, custom elements only where state matters, source-copied into your repo so you own it.",
   "bin": {
@@ -21,7 +21,8 @@
   ],
   "scripts": {
     "test": "node --test test/*.test.js",
-    "test:e2e:touch": "node test/e2e/touch.e2e.mjs"
+    "test:e2e:touch": "node test/e2e/touch.e2e.mjs",
+    "test:e2e:a11y-tree": "node test/e2e/a11y-tree.e2e.mjs"
   },
   "dependencies": {
     "commander": "^14.0.0",

package/packages/registry/components/alert-dialog.ts

@@ -55,6 +55,11 @@
  *   Treat that as a bug in your markup rather than a feature: this dialog
  *   interrupts the user to demand an explicit choice and blocks Escape, so
  *   naming it "Alert dialog" tells them nothing about what they are deciding.
+ *   `role="alertdialog"` and the name both sit on the NATIVE `<dialog>`, a
+ *   valid ARIA-in-HTML override of that element's implicit `dialog` role, so
+ *   exactly one dialog-family node is exposed rather than an `alertdialog`
+ *   nested inside a `dialog`. There is no `aria-modal`: the platform already
+ *   exposes a `showModal()`-opened dialog as modal.
  *
  * Design tokens used: --background, --border, --muted-foreground.
  *
@@ -417,18 +422,23 @@ export class UiAlertDialogContent extends WebComponent({
       panel.setAttribute('aria-describedby', authored);
       return;
     }
+    // Clear the previous open's value before resolving again. The panel keeps
+    // its attributes between opens, so a guard that skips when the attribute is
+    // already present can never re-resolve, and a removed description node
+    // leaves a stale aria-describedby pointing at a dead IDREF.
+    panel.removeAttribute('aria-describedby');
     const desc =
       this.querySelector('[data-slot="alert-dialog-description"]') ?? this.querySelector('p');
-    if (desc && !panel.hasAttribute('aria-describedby')) {
+    if (desc) {
       panel.setAttribute('aria-describedby', ensureId(desc as HTMLElement, 'ui-alert-desc'));
     }
   }
 
   _wireLabels(): void {
-    const panel = this.querySelector('[data-slot="alert-dialog-content"]');
+    const panel = this.querySelector('dialog[data-slot="alert-dialog-native"]');
     if (!panel) return;
     // A name the author put on <ui-alert-dialog-content> is where they
-    // naturally write it, but role="alertdialog" lives on the inner panel.
+    // naturally write it, but role="alertdialog" lives on the native <dialog>.
     //
     // Each authored-name branch RETURNS rather than falling through to the
     // title wiring. Falling through would set aria-labelledby from the title
@@ -449,9 +459,13 @@ export class UiAlertDialogContent extends WebComponent({
       this._wireDescription(panel);
       return;
     }
+    // Same re-resolve rule: clear what a previous open wrote, or a removed
+    // title node leaves a stale aria-labelledby that points at a dead IDREF AND
+    // suppresses the floor below, which exists to prevent exactly that state.
+    panel.removeAttribute('aria-labelledby');
     const title =
       this.querySelector('[data-slot="alert-dialog-title"]') ?? this.querySelector('h1, h2, h3');
-    if (title && !panel.hasAttribute('aria-labelledby')) {
+    if (title) {
       panel.setAttribute('aria-labelledby', ensureId(title as HTMLElement, 'ui-alert-title'));
     }
     this._wireDescription(panel);
@@ -472,15 +486,13 @@ export class UiAlertDialogContent extends WebComponent({
     const parentOpen = !!this._parent()?.open;
     return html`<dialog
       data-slot="alert-dialog-native"
+      role="alertdialog"
       class=${NATIVE_DIALOG_CLASS}
       ${ref(this.#dialog)}
       @cancel=${this._onNativeCancel}
       @close=${this._onNativeClose}
     ><div
       data-slot="alert-dialog-content"
-      role="alertdialog"
-      aria-modal="true"
-      tabindex="-1"
       data-size=${this.size}
       data-state=${parentOpen ? 'open' : 'closed'}
       class=${alertDialogContentClass()}

package/packages/registry/components/dialog.ts

@@ -47,6 +47,10 @@
  *   floor to make an unnamed modal impossible, NOT a substitute: give the
  *   dialog a real title, since "Dialog" tells a screen reader user nothing
  *   about what they have been interrupted with.
+ *   `role="dialog"` and the name both sit on the NATIVE `<dialog>`, not on the
+ *   inner content div, so exactly one dialog-family node is exposed in the
+ *   accessibility tree. There is no `aria-modal`: a `showModal()`-opened
+ *   native dialog is already exposed as modal by the platform.
  *
  * Design tokens used: --background, --border, --muted-foreground.
  *
@@ -111,9 +115,14 @@ function wireDialogDescription(host: Element, panel: Element): void {
     panel.setAttribute('aria-describedby', authored);
     return;
   }
+  // Clear the previous open's value before resolving again. The panel keeps its
+  // attributes between opens, so a guard that skips when the attribute is
+  // already present can never re-resolve: remove the description node and
+  // re-open, and the stale aria-describedby survives pointing at a dead IDREF.
+  panel.removeAttribute('aria-describedby');
   const desc =
     host.querySelector('[data-slot="dialog-description"]') ?? host.querySelector('p');
-  if (desc && !panel.hasAttribute('aria-describedby')) {
+  if (desc) {
     panel.setAttribute('aria-describedby', ensureId(desc as HTMLElement, 'ui-dialog-desc'));
   }
 }
@@ -122,7 +131,7 @@ export function wireDialogLabels(host: Element, panelSelector: string): void {
   const panel = host.querySelector(panelSelector);
   if (!panel) return;
   // A name the author put on <ui-dialog-content> is where they naturally write
-  // it, but role="dialog" lives on the inner panel, so forward it there.
+  // it, but role="dialog" lives on the native <dialog>, so forward it there.
   //
   // This RETURNS once an authored name is forwarded, rather than falling
   // through to the title wiring below. Falling through would set
@@ -144,9 +153,13 @@ export function wireDialogLabels(host: Element, panelSelector: string): void {
     wireDialogDescription(host, panel);
     return;
   }
+  // Same re-resolve rule: clear what a previous open wrote, or a removed title
+  // node leaves a stale aria-labelledby that points at a dead IDREF AND
+  // suppresses the floor below, which exists to prevent exactly that state.
+  panel.removeAttribute('aria-labelledby');
   const title =
     host.querySelector('[data-slot="dialog-title"]') ?? host.querySelector('h1, h2, h3');
-  if (title && !panel.hasAttribute('aria-labelledby')) {
+  if (title) {
     panel.setAttribute('aria-labelledby', ensureId(title as HTMLElement, 'ui-dialog-title'));
   }
   wireDialogDescription(host, panel);
@@ -505,7 +518,7 @@ export class UiDialogContent extends WebComponent({
   }
 
   showModal(): void {
-    wireDialogLabels(this, '[data-slot="dialog-content"]');
+    wireDialogLabels(this, 'dialog[data-slot="dialog-native"]');
     const native = this._native();
     if (native && !native.open) native.showModal();
   }
@@ -520,15 +533,13 @@ export class UiDialogContent extends WebComponent({
     const parentOpen = !!this._parent()?.open;
     return html`<dialog
       data-slot="dialog-native"
+      role="dialog"
       class=${NATIVE_DIALOG_CLASS}
       ${ref(this.#dialog)}
       @close=${this._onNativeClose}
       @click=${this._onNativeBackdropClick}
     ><div
       data-slot="dialog-content"
-      role="dialog"
-      aria-modal="true"
-      tabindex="-1"
       data-state=${parentOpen ? 'open' : 'closed'}
       class=${dialogContentClass()}
     >

package/packages/registry/components/sonner.ts

@@ -32,14 +32,21 @@
  *
  * A11y (owned by the element, nothing to supply):
  *   The viewport is a persistent `aria-live="polite"` region labelled
- *   "Notifications", so a toast is announced as it is inserted; an `error`
- *   toast carries `role="alert"` so it is announced assertively. Every toast
+ *   "Notifications", so a toast is announced as it is inserted, and it is the
+ *   ONLY live root an ordinary toast resolves under: a non-error toast carries
+ *   no role of its own, because `role="status"` is itself a live region and
+ *   nesting one inside the polite viewport bought nothing while making some
+ *   readers announce the toast twice. An `error` toast does carry
+ *   `role="alert"` so it is announced assertively, which is the only way to
+ *   make one item assertive inside a polite viewport, and its second live
+ *   root is the accepted cost of that urgency. Every toast
  *   also ships a labelled close button, so a toast can always be dismissed by
  *   hand rather than only by its timer or a programmatic `toast.dismiss(id)`.
  *   That matters most for a toast that never auto-dismisses, which
  *   `toast.loading()` is by default (`duration: 0`) and which was otherwise
  *   impossible to get rid of from the UI. Each toast's icon is decorative and
- *   aria-hidden; the meaning is in the text and the role.
+ *   aria-hidden; the meaning is in the text, and urgency in the viewport's
+ *   politeness plus `role="alert"` on an error toast.
  *
  * Design tokens used: --popover, --popover-foreground, --border, --radius.
  *
@@ -247,9 +254,16 @@ export class UiSonner extends WebComponent({
     const pos = POSITIONS[this.position] ?? POSITIONS['bottom-right'];
     // The container is a persistent live region: it is in the DOM from the
     // first render (even with zero toasts), so a screen reader announces
-    // each toast as it is inserted. It defaults to polite; an `error` toast
-    // carries its own role="alert" (assertive) and that innermost live
-    // region wins for that item.
+    // each toast as it is inserted. It is polite, and it is the ONLY live
+    // root an ordinary toast resolves under.
+    //
+    // A non-error toast therefore carries no role of its own. It used to carry
+    // role="status", which is itself a live region, so the toast resolved under
+    // TWO nested live roots (measured over CDP, #1245) and some readers
+    // double-announce that. The inner role bought nothing, because the viewport
+    // is already polite. An `error` toast keeps role="alert", which is
+    // load-bearing: it is the only way to make ONE item assertive inside a
+    // polite viewport, and its second live root is the accepted cost.
     return html`<div
       data-slot="sonner"
       role="region"
@@ -262,12 +276,33 @@ export class UiSonner extends WebComponent({
       ${repeat(
         this.items.get(),
         (item) => item.id,
-        (item) => html`<div
-          data-slot="sonner-toast"
-          class=${TOAST_ITEM_BASE}
-          data-type=${item.type}
-          role=${item.type === 'error' ? 'alert' : 'status'}
-        >
+        // The role is BRANCHED rather than written as a nullish hole. A hole
+        // that evaluates to null serves role="" from the server renderer while
+        // the client renderer removes the attribute, which is the divergence
+        // test/ssr-aria.test.js exists to catch, and an empty role is worse
+        // than no role: it is not a role, so the toast falls back to `generic`
+        // in a way no attribute assertion would notice.
+        (item) => (item.type === 'error'
+          ? html`<div
+              data-slot="sonner-toast"
+              class=${TOAST_ITEM_BASE}
+              data-type=${item.type}
+              role="alert"
+            >${this._toastBody(item)}</div>`
+          : html`<div
+              data-slot="sonner-toast"
+              class=${TOAST_ITEM_BASE}
+              data-type=${item.type}
+            >${this._toastBody(item)}</div>`),
+      )}
+    </div>`;
+  }
+
+  // The toast's contents, shared by both arms of the role branch above.
+  // A METHOD, not a module-scope value: a registry module does no work at
+  // module scope.
+  _toastBody(item: ToastItem) {
+    return html`
           <div class=${`${TYPE_ICON_COLOR[item.type]} pt-0.5`}>${unsafeHTML(ICONS[item.type])}</div>
           <div class="flex-1">
             <div class="font-medium">${item.message}</div>
@@ -304,9 +339,7 @@ export class UiSonner extends WebComponent({
             class="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
             @click=${() => this._remove(item.id)}
           >${unsafeHTML(CLOSE_SVG)}</button>
-        </div>`,
-      )}
-    </div>`;
+        `;
   }
 }
 UiSonner.register('ui-sonner');
@@ -316,8 +349,9 @@ UiSonner.register('ui-sonner');
 const CLOSE_SVG =
   '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
 
-// Type glyphs, all decorative: the toast's text carries the meaning, and the
-// type is conveyed by role="alert" vs role="status", not by the picture.
+// Type glyphs, all decorative: the toast's text carries the meaning, and
+// urgency is conveyed by role="alert" on an error toast, not by the picture.
+// An ordinary toast carries no role and is announced by the polite viewport.
 const ICONS: Record<ToastType, string> = {
   default: '',
   success: