@celestia-island/hikari 0.55.126 → 0.55.128

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.126",
+  "version": "0.55.128",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkBlockingToast.scss

@@ -93,6 +93,87 @@
   color: #fff;
 }
 
+// ── Actions on a tinted surface ─────────────────────────────────────
+// The card's surface IS the variant color, so the action row takes its
+// ink from that surface instead of leaking the global accent: a plain
+// primary button reads as a foreign brand on the tinted card (a pink
+// confirm on the teal info card under a pink-themed consumer), and the
+// danger confirm's own red dissolves into its red card. The confirm
+// inverts to a filled white control labeled in a deepened shade of the
+// variant color — the strongest move on every variant surface — and the
+// cancel quiets to a translucent outline in the card's own ink (the
+// house grammar for quiet controls on tinted toast surfaces).
+.hk-blocking-toast-info {
+  --hk-blocking-toast-ink: var(--hi-color-info, #6abed6);
+}
+
+.hk-blocking-toast-warning {
+  --hk-blocking-toast-ink: var(--hi-color-warning, #eed677);
+}
+
+.hk-blocking-toast-danger {
+  --hk-blocking-toast-ink: var(--hi-color-danger, #f85149);
+}
+
+/* The confirm arrives as .hk-btn-primary (info/warning cards) or
+   .hk-btn-danger (danger card) — both recolor to the same inverted
+   control. Labels darken the variant ink (55% toward black) so every
+   variant stays readable on the white fill; svg rides the label color
+   so a themed glyph ink can't wash out against it. */
+.hk-blocking-toast-actions .hk-btn-primary,
+.hk-blocking-toast-actions .hk-btn-danger {
+  background: #fff;
+  border-color: transparent;
+  color: color-mix(in srgb, var(--hk-blocking-toast-ink, #6abed6) 55%, #000);
+
+  svg {
+    color: inherit;
+  }
+}
+
+.hk-blocking-toast-actions .hk-btn-primary:hover:not(:disabled):not(:focus-visible),
+.hk-blocking-toast-actions .hk-btn-danger:hover:not(:disabled):not(:focus-visible) {
+  filter: none;
+  box-shadow: none;
+  background: rgb(255 255 255 / 88%);
+}
+
+.hk-blocking-toast-actions .hk-btn-primary:active:not(:disabled),
+.hk-blocking-toast-actions .hk-btn-danger:active:not(:disabled) {
+  filter: none;
+  background: rgb(255 255 255 / 78%);
+}
+
+/* The secondary cancel stops being a heavy surface block (it rendered
+   as a white pill competing with the confirm on the tinted card) and
+   picks up the quiet outline in the card's currentColor — white on
+   info/danger, near-black on warning — so it reads on every variant
+   without its own per-variant table. */
+.hk-blocking-toast-actions .hk-btn-secondary {
+  background: transparent;
+  border-color: color-mix(in srgb, currentColor 45%, transparent);
+  backdrop-filter: none;
+  color: inherit;
+}
+
+.hk-blocking-toast-actions .hk-btn-secondary:hover:not(:disabled) {
+  border-color: color-mix(in srgb, currentColor 70%, transparent);
+  background: color-mix(in srgb, currentColor 18%, transparent);
+}
+
+.hk-blocking-toast-actions .hk-btn-secondary:active:not(:disabled) {
+  filter: none;
+  background: color-mix(in srgb, currentColor 28%, transparent);
+}
+
+/* The keyboard ring follows the card ink too — the global primary ring
+   would leak the same foreign accent the fill just removed. */
+.hk-blocking-toast-actions .hk-btn:focus-visible {
+  box-shadow:
+    0 0 0 2px rgb(255 255 255 / 60%),
+    0 0 0 4px currentColor;
+}
+
 // Enter/leave mirrors the toast slide (settle, no bounce); leaving
 // cards go absolute so the remaining ones glide up (hk-toast pattern).
 .hk-blocking-toast-enter-active {

package/src/components/HkTemplateField.test.tsx

@@ -673,22 +673,85 @@ describe("HkTemplateField partially-grouped vocabulary", () => {
 });
 
 describe("HkTemplateField vocabulary semantics guards", () => {
-  it("the rows containers carry no listbox role (menu/dialog context)", async () => {
+  it("container roles split by context: panel bare in the menu, editor a labeled listbox", async () => {
     const el = mountWithTokens([
       { name: "id", group: "identity" },
       { name: "md5_email", group: "email" },
     ]);
     await nextTick();
     await openTrigger(el, "{{ ");
+    // The panel surface is HkMenu's role="menu" — the rows container
+    // must not re-role it (listbox-in-menu was the illegal nesting).
     const panelRows = document.body.querySelector<HTMLElement>(".hk-tpl-rows")!;
     expect(panelRows.getAttribute("role")).toBeNull();
 
+    // The editor surface is a DIALOG — a listbox is the correct list
+    // semantics there (restored deliberately, with an accessible name).
     const el2 = mount({ modelValue: "a {{ username }} b" });
     await nextTick();
     editable(el2).querySelector<HTMLElement>(".hk-tpl-chip")!.click();
     await nextTick();
     const editorRows = document.body.querySelector<HTMLElement>(".hk-tpl-editor-rows")!;
-    expect(editorRows.getAttribute("role")).toBeNull();
+    expect(editorRows.getAttribute("role")).toBe("listbox");
+    expect(editorRows.getAttribute("aria-label")).toBeTruthy();
+  });
+
+  it("panel rows are menuitems and the editable announces the active one", async () => {
+    const el = mountWithTokens([
+      { name: "id", group: "identity" },
+      { name: "username", group: "identity" },
+    ]);
+    await nextTick();
+    const edit = editable(el);
+    await openTrigger(el, "{{ ");
+    // Combobox wiring on the editable: expanded + owns the rows.
+    expect(edit.getAttribute("aria-haspopup")).toBe("menu");
+    expect(edit.getAttribute("aria-expanded")).toBe("true");
+    const rowsId = edit.getAttribute("aria-owns")!;
+    expect(rowsId).toBeTruthy();
+    expect(document.getElementById(rowsId)?.classList.contains("hk-tpl-rows")).toBe(true);
+    // Rows are menuitems with stable ids.
+    const rows = Array.from(document.body.querySelectorAll<HTMLElement>(".hk-tpl-rows .hk-tpl-row"));
+    expect(rows.every((r) => r.getAttribute("role") === "menuitem")).toBe(true);
+    expect(rows[0]!.id).toBe(`${rowsId}-row-0`);
+    // The activedescendant starts at the first row and follows ArrowDown.
+    expect(edit.getAttribute("aria-activedescendant")).toBe(`${rowsId}-row-0`);
+    edit.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(edit.getAttribute("aria-activedescendant")).toBe(`${rowsId}-row-1`);
+
+    // Zero matches while the panel is open: the rows container does
+    // not render, so aria-owns must not dangle (R1 finding).
+    await openTrigger(el, "{{ idzzz");
+    expect(edit.getAttribute("aria-owns")).toBeNull();
+    expect(edit.getAttribute("aria-activedescendant")).toBeNull();
+    expect(edit.getAttribute("aria-expanded")).toBe("true");
+
+    // Collapsed state: no expansion attributes dangle.
+    edit.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(edit.getAttribute("aria-expanded")).toBeNull();
+    expect(edit.getAttribute("aria-owns")).toBeNull();
+    expect(edit.getAttribute("aria-activedescendant")).toBeNull();
+  });
+
+  it("editor rows are options with the current token selected", async () => {
+    const el = mount({ modelValue: "a {{ username }} b" });
+    await nextTick();
+    editable(el).querySelector<HTMLElement>(".hk-tpl-chip")!.click();
+    await nextTick();
+    const options = Array.from(
+      document.body.querySelectorAll<HTMLElement>(".hk-tpl-editor-rows .hk-tpl-row"),
+    );
+    expect(options.length).toBeGreaterThan(1);
+    expect(options.every((o) => o.getAttribute("role") === "option")).toBe(true);
+    const selected = options.filter((o) => o.getAttribute("aria-selected") === "true");
+    expect(selected).toHaveLength(1);
+    expect(selected[0]!.textContent).toContain("username");
   });
 
   it("the panel's active highlight follows the filtered index inside wrappers", async () => {

package/src/components/HkTemplateField.tsx

@@ -114,6 +114,9 @@ export const HkTemplateField = defineComponent({
     // association HkInput gives a bare `label` prop — label clicks
     // focus, screen readers announce the field by name).
     const fieldId = useId();
+    /** Stable id for the panel rows container + its row ids (combobox
+     *  aria-owns/activedescendant targets). */
+    const panelRowsId = `hk-tpl-panel-${fieldId}`;
 
     const editRef = ref<HTMLElement | null>(null);
     /** The value the DOM currently represents. Authoritative while the
@@ -926,18 +929,31 @@ export const HkTemplateField = defineComponent({
       return out;
     }
 
+    /** Row chrome shared by both surfaces. The ROLE rides the surface:
+     *  the panel lives inside HkMenu's role="menu" (menuitem — the
+     *  HkMenuActionItem family pattern), the editor lives in a dialog
+     *  and is a proper listbox (option + aria-selected on the token
+     *  being edited). */
     const renderTokenRow = (
       def: HkTemplateTokenDef,
       active: boolean,
       onPick: () => void,
-      i?: number,
+      opts: {
+        i?: number;
+        role: "menuitem" | "option";
+        selected?: boolean;
+        id?: string;
+      },
     ) => (
       <button
         key={def.name}
         type="button"
         class="hk-tpl-row"
+        role={opts.role}
+        id={opts.id}
+        aria-selected={opts.role === "option" ? (opts.selected || false) : undefined}
         data-active={active || undefined}
-        ref={i !== undefined ? setRowRef(i) : undefined}
+        ref={opts.i !== undefined ? setRowRef(opts.i) : undefined}
         onMousedown={(e: MouseEvent) => e.preventDefault()}
         onClick={(e: MouseEvent) => {
           e.stopPropagation();
@@ -966,6 +982,21 @@ export const HkTemplateField = defineComponent({
             contenteditable={!props.disabled}
             role="textbox"
             aria-multiline="false"
+            // Combobox announcement wiring: the editable OWNS the popup
+            // (aria-owns makes the teleported rows virtual descendants)
+            // and points aria-activedescendant at the highlighted row,
+            // so arrow-key navigation is announced without moving DOM
+            // focus out of the field.
+            aria-haspopup="menu"
+            aria-expanded={suggestOpen.value || undefined}
+            aria-owns={
+              suggestOpen.value && filteredTokens.value.length > 0 ? panelRowsId : undefined
+            }
+            aria-activedescendant={
+              suggestOpen.value && filteredTokens.value.length > 0
+                ? `${panelRowsId}-row-${Math.min(suggestActive.value, filteredTokens.value.length - 1)}`
+                : undefined
+            }
             id={fieldId}
             spellcheck={false}
             data-ph={props.placeholder}
@@ -1001,13 +1032,17 @@ export const HkTemplateField = defineComponent({
           title={t("hikari::templateField.suggestTitle", "Placeholders")}
         >
           {filteredTokens.value.length > 0 ? (
-            <div class="hk-tpl-rows">
+            <div class="hk-tpl-rows" id={panelRowsId}>
               {renderGroupedRows(filteredTokens.value, ({ def, index }) =>
                 renderTokenRow(
                   def,
                   index === Math.min(suggestActive.value, filteredTokens.value.length - 1),
                   () => pickSuggestion(def),
-                  index,
+                  {
+                    i: index,
+                    role: "menuitem",
+                    id: `${panelRowsId}-row-${index}`,
+                  },
                 ),
               )}
             </div>
@@ -1074,9 +1109,17 @@ export const HkTemplateField = defineComponent({
               />
             </div>
             <div ref={editorRowsHostRef} class="hk-tpl-editor-scroll">
-              <div ref={editorRowsRef} class="hk-tpl-editor-rows">
+              <div
+                ref={editorRowsRef}
+                class="hk-tpl-editor-rows"
+                role="listbox"
+                aria-label={t("hikari::templateField.chipEditorTitle", "Edit placeholder")}
+              >
                 {renderGroupedRows(editorRows.value, ({ def }) =>
-                  renderTokenRow(def, def.name === editorToken.value, () => applyChipToken(def.name)),
+                  renderTokenRow(def, def.name === editorToken.value, () => applyChipToken(def.name), {
+                    role: "option",
+                    selected: def.name === editorToken.value,
+                  }),
                 )}
                 {editorRows.value.length === 0 && (
                   <p class="hk-tpl-rows-empty">