@celestia-island/hikari 0.55.335 → 0.55.336

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.335",
+  "version": "0.55.336",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkNumberInput.test.tsx

@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkNumberInput from "./HkNumberInput";
+
+/**
+ * HkNumberInput's label-association contract (#1206): a bare `label` prop
+ * used to render a <label> with NO programmatic association to the field
+ * (no `for`, no wrapping), so the number field announced as "spin button"
+ * to screen readers. Mirrors HkInput's contract — `for` points at the
+ * field id, which is `props.id` when given and a useId() generation
+ * otherwise — and follows the repo test convention (raw createApp +
+ * document queries, no @vue/test-utils).
+ */
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountInput(props: Record<string, unknown>): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => h(HkNumberInput, props) });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkNumberInput label association (#1206)", () => {
+  it("associates a bare label with the field via for/id", () => {
+    const container = mountInput({ label: "Per-phone cap", modelValue: 10 });
+    console.log("HTML:", container.innerHTML.slice(0, 300));
+    const label = container.querySelector("label.hk-input-label");
+    const field = container.querySelector<HTMLInputElement>("input.hk-number-input-field");
+    expect(label).not.toBeNull();
+    expect(field).not.toBeNull();
+    expect(label!.getAttribute("for")).toBe(field!.id);
+    expect(field!.id).not.toBe("");
+  });
+
+  it("an explicit id prop wins over the generated one", () => {
+    const container = mountInput({ label: "Cap", modelValue: 1, id: "cap-field" });
+    const label = container.querySelector("label.hk-input-label");
+    const field = container.querySelector<HTMLInputElement>("input.hk-number-input-field");
+    expect(field!.id).toBe("cap-field");
+    expect(label!.getAttribute("for")).toBe("cap-field");
+  });
+
+  it("keeps field ids unique among instances of ONE app", () => {
+    // useId's counter is PER APP: two separate createApp mounts both start
+    // at v-0 (uniqueness is a within-app contract — a real host has one
+    // app). Two siblings in the same app must never share an id, or the
+    // second label's `for` would point at the FIRST field.
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h("div", [
+          h(HkNumberInput, { modelValue: 1, label: "First" }),
+          h(HkNumberInput, { modelValue: 2, label: "Second" }),
+        ]),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    const fields = [...container.querySelectorAll<HTMLInputElement>("input.hk-number-input-field")];
+    expect(fields).toHaveLength(2);
+    const ids = fields.map((f) => f.id);
+    expect(new Set(ids).size).toBe(2);
+    // Each label's `for` points at ITS OWN field, in document order.
+    const labels = [...container.querySelectorAll("label.hk-input-label")];
+    expect(labels[0]!.getAttribute("for")).toBe(ids[0]);
+    expect(labels[1]!.getAttribute("for")).toBe(ids[1]);
+  });
+});

package/src/components/HkNumberInput.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, type PropType } from "vue";
+import { computed, defineComponent, ref, useId, type PropType } from "vue";
 import HkNumberSteppers from "./HkNumberSteppers";
 import "./HkNumberInput.scss";
 
@@ -12,6 +12,13 @@ export default defineComponent({
     disabled: { type: Boolean, default: false },
     placeholder: { type: String, default: undefined },
     label: { type: String, default: undefined },
+    /* `id` for the field element; the rendered label's `for` points here.
+       Generated via Vue's useId when omitted, so a bare `label` prop is
+       fully associated for screen readers and label clicks with zero
+       caller effort (HkInput's contract, same shape). Without this the
+       bare <label> had NO programmatic association at all — the field
+       announced as "spin button" (2026-11-10, #1206). */
+    id: { type: String, default: undefined },
     /* Affix text rendered INSIDE the field (before/after the input,
        flex-centered by the inner row). Slots of the same name take
        precedence; empty/undefined means no affix. Consumers should use
@@ -60,6 +67,13 @@ export default defineComponent({
       emitValue(props.modelValue - props.step);
     }
 
+    // Field identity: the rendered label points at this id, so a bare
+    // `label` prop gives a fully associated field (screen readers, label
+    // clicks). An explicit `id` prop wins. useId() must run synchronously
+    // in setup; it is SSR-safe (HkInput's same shape).
+    const generatedId = useId();
+    const fieldId = computed(() => props.id ?? generatedId);
+
     const wrapperClass = computed(() => [
       "hk-number-input",
       `hk-number-input-${props.size}`,
@@ -68,7 +82,7 @@ export default defineComponent({
 
     return () => (
       <div class={wrapperClass.value}>
-        {props.label && <label class="hk-input-label">{props.label}</label>}
+        {props.label && <label class="hk-input-label" for={fieldId.value}>{props.label}</label>}
         <div class="hk-number-input-inner">
           {(slots.prefix || props.prefix) ? (
             <span class="hk-number-input-prefix">
@@ -77,6 +91,7 @@ export default defineComponent({
           ) : null}
           <input
             ref={inputRef}
+            id={fieldId.value}
             type="number"
             class="hk-number-input-field"
             value={props.modelValue}

package/src/overlay/overlayRoot.styles.test.ts

@@ -40,6 +40,33 @@ function sourcesIn(dir: string): string[] {
   return out;
 }
 
+describe("overlay root accessibility contract (#1206)", () => {
+  it("creates a root that is NOT aria-hidden", () => {
+    // The root USED to be created wholesale aria-hidden (2026-11-10
+    // a11y review). Since HkModal / HkDrawer / HkToast / every floating
+    // layer teleport INTO this root, that hid the whole popup subtree
+    // from the accessibility tree — role="dialog", aria-modal,
+    // aria-label and aria-busy never reached AT. Decorative layers
+    // declare their own aria-hidden where needed (the modal blur
+    // plate); the root itself must stay out of the hiding business,
+    // exactly like hudRoot's documented contract.
+    const root = ensureOverlayRoot();
+    if (!root) throw new Error("overlay root was not created");
+    expect(root.id).toBe("hk-overlay-root");
+    expect(root.hasAttribute("aria-hidden")).toBe(false);
+  });
+
+  it("keeps the root free of an aria-hidden writer", () => {
+    // Guard the fix at the source level too: the module must not grow a
+    // new setAttribute writer for the root's aria-hidden (the same
+    // regression the runtime assertion above catches, caught statically).
+    // The comment deliberately NAMES the attribute to explain its
+    // absence, so this matches the writer shape, not the word.
+    const source = readFileSync(resolve(overlayDir, "overlayRoot.ts"), "utf8");
+    expect(source).not.toMatch(/setAttribute\(["']aria-hidden/);
+  });
+});
+
 describe("overlay root document-space elevation contract", () => {
   const css = compile(resolve(overlayDir, "overlayRoot.scss"), {
     style: "expanded",

package/src/overlay/overlayRoot.ts

@@ -83,7 +83,16 @@ export function ensureOverlayRoot(): HTMLElement | null {
   if (!root) {
     root = document.createElement("div");
     root.id = "hk-overlay-root";
-    root.setAttribute("aria-hidden", "true");
+    // Deliberately NO aria-hidden here — the exact opposite of what the
+    // 2026-11-10 a11y review found (#1206): the root used to be created
+    // wholesale hidden, and since HkModal / HkDrawer / HkToast / every
+    // floating layer teleport INTO this root, the whole popup subtree was
+    // invisible to assistive tech (role="dialog", aria-modal, aria-label
+    // and aria-busy never reached the tree). Decorative layers declare
+    // their own aria-hidden where needed (the modal blur plate), and the
+    // root itself is a zero-size, pointer-transparent wrapper that has
+    // nothing to announce — matching hudRoot's contract.
+    root.setAttribute("data-hk-overlay-root", "");
     // Inline styles — this element is created BEFORE any stylesheet
     // loads, so it must be self-sufficient. `isolation` fences the
     // root's internal z-index space from the document's global stacking

package/src/utils/dom.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
 import { clearLeaveGeometry, pinLeaveGeometry } from "./dom";
 
@@ -168,3 +168,96 @@ describe("pinLeaveGeometry", () => {
     expect(el.style.marginLeft).toBe("4px");
   });
 });
+
+/**
+ * FOCUSABLE_SELECTOR contract (#1206): every element-type branch must
+ * exclude [tabindex="-1"].
+ *
+ * The generic `[tabindex]` branch always did; the named branches did not,
+ * so a `button[tabindex="-1"]` (HkNumberSteppers' hold-to-repeat buttons
+ * are exactly that) MATCHED and could become a container's last
+ * "focusable" element. `trapFocus` only wraps when the focused element is
+ * the first/last member of the set — with a non-tab-stop as `last`, a
+ * forward Tab from the previous input walked straight out of the dialog
+ * (chest's SMS policy window was the reporter; the selector's own doc
+ * comment already claimed "excluding tabindex=-1", the implementation
+ * just never delivered it for the named branches).
+ *
+ * These tests use REAL DOM nodes appended to the document: happy-dom
+ * implements matches()/focus() on connected nodes, and the trap's wrap
+ * semantics depend on document.activeElement.
+ */
+import { FOCUSABLE_SELECTOR, getFocusableElements, trapFocus } from "./dom";
+
+describe("FOCUSABLE_SELECTOR excludes tabindex=-1 in every branch", () => {
+  let host: HTMLElement;
+
+  const tabFrom = (el: HTMLElement): boolean => {
+    el.focus();
+    const ev = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+    trapFocus(host, ev);
+    return ev.defaultPrevented;
+  };
+
+  beforeEach(() => {
+    host = document.createElement("div");
+    document.body.appendChild(host);
+  });
+
+  afterEach(() => {
+    host.remove();
+  });
+
+  it("excludes a button[tabindex=-1] that would otherwise be the trap's last", () => {
+    // The reporter's shape: switch/input, then a number field whose
+    // stepper column ends with tabindex=-1 buttons, then a disabled Save.
+    host.innerHTML = `
+      <input type="checkbox" data-name="switch" />
+      <input type="number" data-name="ttl" />
+      <button type="button" tabindex="-1" data-name="ttl-up"></button>
+      <button type="button" tabindex="-1" data-name="ttl-down"></button>
+      <input type="number" data-name="cap" />
+      <button type="button" tabindex="-1" data-name="cap-up"></button>
+      <button type="button" tabindex="-1" data-name="cap-down"></button>
+    `;
+    const focusable = getFocusableElements(host);
+    // The three real inputs; the four steppers are excluded.
+    expect(focusable).toHaveLength(3);
+    const last = focusable[focusable.length - 1]!;
+    expect(last.dataset.name).toBe("cap");
+    // The native tab order ends here too — so the trap's last IS the
+    // last real tab stop, and a forward Tab from `cap` wraps to first.
+    expect((last.nextElementSibling as HTMLElement).tabIndex).toBe(-1);
+    expect(tabFrom(last)).toBe(true);
+    expect((document.activeElement as HTMLElement).dataset.name).toBe("switch");
+  });
+
+  it("excludes tabindex=-1 in the a[href], textarea and select branches too", () => {
+    host.innerHTML = `
+      <a href="#" tabindex="-1" data-name="link"></a>
+      <a href="#" data-name="link-ok"></a>
+      <textarea tabindex="-1" data-name="ta"></textarea>
+      <textarea data-name="ta-ok"></textarea>
+      <select tabindex="-1" data-name="sel"></select>
+      <select data-name="sel-ok"></select>
+    `;
+    const names = getFocusableElements(host).map((el) => el.dataset.name);
+    expect(names).toEqual(["link-ok", "ta-ok", "sel-ok"]);
+  });
+
+  it("still counts explicit tabindex=0 as a real tab stop", () => {
+    host.innerHTML = `
+      <button type="button" data-name="first"></button>
+      <div tabindex="0" data-name="panel"></div>
+    `;
+    const names = getFocusableElements(host).map((el) => el.dataset.name);
+    expect(names).toEqual(["first", "panel"]);
+  });
+
+  it("falls back to an empty set when nothing is focusable (trap no-ops)", () => {
+    host.innerHTML = `<button type="button" tabindex="-1"></button>`;
+    expect(getFocusableElements(host)).toHaveLength(0);
+    // trapFocus with an empty set must not throw and must not move focus.
+    expect(tabFrom(document.activeElement as HTMLElement)).toBe(false);
+  });
+});

package/src/utils/dom.ts

@@ -1,5 +1,17 @@
+/**
+ * Elements a native Tab can actually reach.
+ *
+ * Every element-type branch excludes `[tabindex="-1"]` — the generic
+ * `[tabindex]` branch already did, but the named branches did not, so a
+ * `button[tabindex="-1"]` (HkNumberSteppers' hold-to-repeat buttons are
+ * exactly that) matched and could become a trap's `last`. `trapFocus`
+ * only wraps when the focused element IS the first/last member of this
+ * set; with a non-tab-stop as `last`, a forward Tab from the previous
+ * input walked straight out of the dialog (2026-11-10, #1206 — chest's
+ * SMS policy window was the reporter).
+ */
 export const FOCUSABLE_SELECTOR =
-  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+  'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
 
 /** All focusable elements inside a container (excluding tabindex=-1). */
 export function getFocusableElements(container: HTMLElement): HTMLElement[] {