@celestia-island/hikari 0.55.292 → 0.55.293

package/package.json

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

package/src/components/HkSolarLocationSetting.scss

@@ -59,11 +59,32 @@
 
 /* The icon-only action's tooltip host: the button itself is disabled in
  * manual modes and therefore loses pointer events (native `disabled`), so
- * the title has to live on this wrapper. */
+ * the title has to live on this wrapper. `relative` anchors the visually
+ * hidden reason span below. */
 .hk-solar-edit-wrap {
   display: inline-flex;
   flex: none;
   align-items: center;
+  position: relative;
+}
+
+/* The disabled-state reason for screen readers: a natively disabled button
+ * is unfocusable, so keyboard/AT users can never reach a tooltip. The span
+ * is referenced from the button's aria-describedby (rendered only while
+ * disabled) and collapses to nothing visually — the clip pair hides the
+ * box entirely without `display:none`, which would drop it from the
+ * accessibility tree too. */
+.hk-solar-edit-reason {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
 }
 
 .hk-solar-edit {

package/src/components/HkSolarLocationSetting.styles.test.ts

@@ -0,0 +1,77 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+/**
+ * HkSolarLocationSetting row-geometry contract (S3 follow-up, 2026-11-05):
+ * the first polish wave let `line-height: 1` clip descenders through every
+ * gate because ONLY Vue↔Rust sheet equality was guarded — both forms were
+ * wrong together. This spec pins the VALUES the row's single-center
+ * geometry depends on, so a future "simplification" of the leading (or the
+ * row minimum, or the glyph box) fails here before it ships.
+ *
+ * The vendored Rust mirror is byte-guarded by
+ * packages/components/tests/vue_mirror_drift_tests.rs
+ * (mirror_bodies_match_their_upstream_sheets); this file only has to pin
+ * the canonical Vue sheet.
+ */
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkSolarLocationSetting.scss"), "utf8");
+
+/** Comments stripped: a comment naming a property must not satisfy a guard
+ *  about it (the house rule from HkAmbientLayer's pointer contract). */
+const declarations = scss.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
+
+/** One ruleset's body, or null when the selector never appears. */
+function bodyOf(selector: string): string | null {
+  const re = new RegExp(
+    selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "\\s*\\{([^{}]*)\\}",
+  );
+  const m = declarations.match(re);
+  return m ? m[1] : null;
+}
+
+describe("HkSolarLocationSetting row geometry", () => {
+  it("pins the row's cross size to the 28px action square", () => {
+    const row = bodyOf(".hk-solar-row");
+    expect(row, "the row ruleset exists").not.toBeNull();
+    // The single geometric center: the row's cross size is the icon-button
+    // square, not the summary's line box.
+    expect(row).toMatch(/min-height:\s*var\(--space-28,\s*1\.75rem\)/);
+    expect(row).toMatch(/align-items:\s*center/);
+  });
+
+  it("pins the summary leading to the resolved font's own metrics", () => {
+    const summary = bodyOf(".hk-solar-summary");
+    expect(summary, "the summary ruleset exists").not.toBeNull();
+    // `normal` — NOT a hand-picked multiplier: fixed 1em/1.2em line boxes
+    // clipped descenders in Latin, Arabic and CJK fallback faces (the text
+    // clips at the ellipsis via overflow:hidden).
+    expect(summary).toMatch(/line-height:\s*normal/);
+  });
+
+  it("keeps the glyph box leading-free", () => {
+    const icon = bodyOf(".hk-solar-summary-icon");
+    expect(icon, "the glyph ruleset exists").not.toBeNull();
+    expect(icon).toMatch(/line-height:\s*0/);
+  });
+
+  it("collapses the screen-reader reason without display:none", () => {
+    const reason = bodyOf(".hk-solar-edit-reason");
+    expect(reason, "the reason ruleset exists").not.toBeNull();
+    // display:none would drop the span from the accessibility tree, which
+    // defeats the aria-describedby contract; the clip pair hides it
+    // visually while keeping it readable.
+    expect(reason).not.toMatch(/display:\s*none/);
+    expect(reason).toMatch(/position:\s*absolute/);
+    expect(reason).toMatch(/clip-path:\s*inset\(50%\)/);
+  });
+
+  it("anchors the reason span inside the wrapper", () => {
+    const wrap = bodyOf(".hk-solar-edit-wrap");
+    expect(wrap, "the wrapper ruleset exists").not.toBeNull();
+    expect(wrap).toMatch(/position:\s*relative/);
+  });
+});

package/src/components/HkSolarLocationSetting.test.tsx

@@ -256,14 +256,21 @@ describe("HkSolarLocationSetting card", () => {
   it("grays the edit action outside auto mode and re-enables it in auto", async () => {
     const { setMode } = useTheme();
     // Mount in AUTO first, then drive the live mode transitions a host's
-    // own switch performs — this is the user path and it keeps the test
-    // independent of which mode the singleton happened to carry at mount.
+    // own switch performs — the user path. The "enabled at mount" assertion
+    // below DEPENDS on the beforeEach resetEngineState() forcing the theme
+    // singleton back to "system"; do not remove that reset, or the first
+    // assertion here must go.
     const container = mountSetting();
     await settle();
     expect(editButton(container).disabled, "auto mode enables the editor").toBe(false);
     expect(editButton(container).closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe(
       "Edit",
     );
+    expect(
+      editButton(container).getAttribute("aria-describedby"),
+      "no reason reference while enabled",
+    ).toBeNull();
+    expect(container.querySelector(".hk-solar-edit-reason"), "no reason span while enabled").toBeNull();
 
     setMode("light");
     await settle();
@@ -273,19 +280,33 @@ describe("HkSolarLocationSetting card", () => {
     expect(btn.closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe(
       "Switch to Auto mode to change the daylight location",
     );
+    // The disabled reason must reach keyboard/AT users too: the tooltip is
+    // mouse-only (a natively disabled control is unfocusable), so the same
+    // text rides a visually hidden span referenced via aria-describedby.
+    const describedBy = btn.getAttribute("aria-describedby");
+    expect(describedBy, "the disabled button points at its reason text").toBeTruthy();
+    const reason = container.querySelector(`#${describedBy}`);
+    expect(reason, "the referenced reason span exists").toBeTruthy();
+    expect(reason?.classList.contains("hk-solar-edit-reason")).toBe(true);
+    expect(reason?.textContent?.trim()).toBe(
+      "Switch to Auto mode to change the daylight location",
+    );
 
     // A disabled native button cannot open the editor.
     btn.click();
     await settle();
     expect(modalHeader(), "disabled edit never opens the modal").toBeNull();
 
-    // Back to auto: the SAME mounted card re-enables on the live mode ref.
+    // Back to auto: the SAME mounted card re-enables on the live mode ref,
+    // and the a11y reason leaves the DOM with the disabled state.
     setMode("system");
     await settle();
     expect(editButton(container).disabled).toBe(false);
     expect(editButton(container).closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe(
       "Edit",
     );
+    expect(editButton(container).getAttribute("aria-describedby")).toBeNull();
+    expect(container.querySelector(".hk-solar-edit-reason")).toBeNull();
 
     // Dark is just another manual side of the same gate.
     setMode("dark");
@@ -293,6 +314,26 @@ describe("HkSolarLocationSetting card", () => {
     expect(editButton(container).disabled).toBe(true);
   });
 
+  it("gives each mounted card its own disabled-reason id", async () => {
+    const { setMode } = useTheme();
+    setMode("dark");
+    const first = mountSetting();
+    const second = mountSetting();
+    await settle();
+
+    const ids = [first, second].map((c) =>
+      c.querySelector<HTMLElement>(".hk-solar-edit-reason")?.getAttribute("id"),
+    );
+    expect(ids.every(Boolean), "both disabled cards render their reason text").toBe(true);
+    expect(ids[0]).not.toBe(ids[1]);
+    // Each button points at its OWN card's span, not the other one's.
+    for (const c of [first, second]) {
+      const btn = editButton(c);
+      const own = c.querySelector(`#${btn.getAttribute("aria-describedby")}`);
+      expect(own, "the describedby reference resolves inside the same card").toBeTruthy();
+    }
+  });
+
   it("is a standard hikari card: localized default title, overridable, hideable", async () => {
     const container = mountSetting();
     await settle();

package/src/components/HkSolarLocationSetting.tsx

@@ -38,6 +38,12 @@ import "./HkSolarLocationSetting.scss";
 // actually opens the manual pane — the settings card stays weightless.
 const HkTimeZoneGlobe = defineAsyncComponent(() => import("./HkTimeZoneGlobe"));
 
+/** Per-instance id for the disabled-state reason text (aria-describedby).
+ *  A host page may mount more than one card (settings + a popover), so a
+ *  static id would collide; a module counter keeps ids unique across mounts
+ *  while staying deterministic for tests. */
+let nextSolarReasonId = 0;
+
 /** One copyable value of the editor's detected-value readout. `mono`
  *  faces technical ids (zone ids, IPs, ASNs) in the badge mono face;
  *  `wrap` renders the rectangular, soft-wrapping chip for long prose
@@ -181,6 +187,7 @@ export const HkSolarLocationSetting = defineComponent({
     // AUTO-mode gate: the sun clock only drives the theme in "system".
     const { currentMode } = useTheme();
     const editorDisabled = computed(() => currentMode.value !== "system");
+    const reasonId = `hk-solar-edit-reason-${(nextSolarReasonId += 1)}`;
     // The engine hydrates lazily (storage-silent imports): a host that
     // mounts this card before initTheme() still sees the stored strategy.
     hydrateSolarLocationState();
@@ -449,7 +456,10 @@ export const HkSolarLocationSetting = defineComponent({
           {/* Icon-only Edit (2026-11-05): the row's action is the standard
               ghost icon-button square, not a text pill. Disabled outside
               auto mode; the wrapper owns the tooltip because a disabled
-              button drops pointer events. */}
+              button drops pointer events, and — since a natively disabled
+              control is also UNFOCUSABLE, so keyboard/AT users never see a
+              tooltip — the same explanation rides a visually hidden span
+              referenced through aria-describedby. */}
           <span
             class="hk-solar-edit-wrap"
             title={
@@ -463,11 +473,17 @@ export const HkSolarLocationSetting = defineComponent({
               variant="ghost"
               class="hk-solar-edit"
               aria-label={t("hikari::theme.solar.edit")}
+              aria-describedby={editorDisabled.value ? reasonId : undefined}
               disabled={editorDisabled.value}
               onClick={openEditor}
             >
               {{ icon: () => <Pencil size={16} /> }}
             </HkIconButton>
+            {editorDisabled.value && (
+              <span id={reasonId} class="hk-solar-edit-reason">
+                {t("hikari::theme.solar.editAutoOnly")}
+              </span>
+            )}
           </span>
         </div>