jig-ui 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 0.18.1
+
+Two fixes found by jig-site's fourth round: the probe misread a `<details>`
+menu, and `A-05` missed an arrow that renders as an emoji.
+
+### Fixed
+
+- **The probe reads a `<details>` menu the way the browser shows it.** On
+  jig-site's Reference it reported a working phone menu as broken, and
+  `jig verdicts` refused a correct `P-14` verdict on the strength of it. Four
+  defects, each now covered by a browser test:
+  - Where the banner's menu is hidden at a width, the probe took the next
+    disclosure in some other `<nav>` (a docs rail's section tree) as the menu,
+    and reported "a menu button beside links that already show". A menu the
+    page names, or one in its banner, is now the only candidate once it exists.
+  - A closed `<details>` hides its content with `content-visibility` in
+    Chromium, which still gives its links boxes, so the closed menu's links
+    counted as showing and opening it "showed no more links". Visibility now
+    also asks `checkVisibility()`.
+  - A label swapped with CSS ("Menu" to "Close") keeps both words in
+    `textContent`; the label is now read from the rendered text.
+  - A native `<summary>` has no `aria-expanded` attribute; its expanded state
+    is its `<details>`'s `open`, which is what assistive technology is given.
+
+  Probe files are now version 6, so earlier ones are re-recorded.
+
+- **`A-05` catches an arrow that turns into an emoji.** ↔ ↕ ↖ ↗ ↘ ↙ ↩ ↪ ▶ ◀
+  are text by default but have an emoji form, and the detector skipped the
+  whole arrow block so prose arrows would not fire. jig-site marked its
+  external links with `<span aria-hidden="true">↗</span>`, which some platforms
+  draw as a colour emoji, and `check --all` and three critiques passed it. One
+  of these characters now fires when it stands alone as an icon (the whole
+  content of an element, or a pseudo-element's `content`) without U+FE0E. The
+  same arrow in a sentence still does not.
+
 ## 0.18.0
 
 A page's frame gets tokens, a project gets a place to record where its layout

package/dist/index.js

@@ -2265,6 +2265,11 @@ function maskProseComments(raw) {
 // src/check/detectors/emoji-icon.ts
 var EMOJI_RE = /[\u{1F300}-\u{1FAFF}\u{1F000}-\u{1F2FF}\u{2600}-\u{27BF}\u{2B00}-\u{2BFF}\u{FE0F}]/gu;
 var TEXTUAL = /* @__PURE__ */ new Set(["\u2192", "\u2190", "\u2191", "\u2193", "\u2194", "\u21D2", "\u21D0", "\u2122", "\u2713", "\u2717", "\u2212", "\u2217", "\u2318", "\u2325", "\u23CE"]);
+var EMOJI_CAPABLE = "\\u2194-\\u2199\\u21A9\\u21AA\\u25B6\\u25C0";
+var LONE_GLYPH = new RegExp(
+  `>\\s*([${EMOJI_CAPABLE}])(?!\\uFE0E)\\s*<|content\\s*:\\s*["']([${EMOJI_CAPABLE}])(?!\\uFE0E)["']`,
+  "gu"
+);
 var emojiIcon = {
   name: "emoji-icon",
   appliesTo: (file) => isStyleBearing(file),
@@ -2289,6 +2294,22 @@ var emojiIcon = {
         )
       );
     }
+    for (const m of masked.matchAll(LONE_GLYPH)) {
+      const glyph = m[1] ?? m[2];
+      const line = masked.slice(0, m.index + m[0].indexOf(glyph)).split("\n").length;
+      if (seen.has(line)) continue;
+      seen.add(line);
+      findings.push(
+        mkFinding(
+          ctx,
+          "emoji-icon",
+          file,
+          line,
+          `A character with an emoji form used as an icon (${glyph}). Standing alone, it renders as a colour emoji on some platforms. Use an icon set, or words.`,
+          lines[line - 1] ?? ""
+        )
+      );
+    }
     return findings;
   }
 };
@@ -5676,10 +5697,13 @@ import { fileURLToPath as fileURLToPath2 } from "url";
 import { join as join33, relative as relative3, resolve as resolve4, sep as sep5 } from "path";
 
 // src/probe/script.ts
-var PROBE_VERSION = 5;
+var PROBE_VERSION = 6;
 var PROBE_SCRIPT = `(async () => {
   const doc = document.documentElement;
-  const vis = (e) => { const r = e.getBoundingClientRect(); const s = getComputedStyle(e); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none'; };
+  // checkVisibility also sees content a closed <details> hides: Chromium hides
+  // it with content-visibility, which still gives its links real boxes, so a
+  // closed menu counted as open and an opened one showed "no more links".
+  const vis = (e) => { const r = e.getBoundingClientRect(); const s = getComputedStyle(e); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && s.display !== 'none' && (!e.checkVisibility || e.checkVisibility()); };
   const probe = document.createElement('div');
   probe.style.all = 'initial';
   document.body.appendChild(probe);
@@ -5772,19 +5796,32 @@ var PROBE_SCRIPT = `(async () => {
   const inChrome = (b) => !!b.closest('header, [role=banner]') ||
     (!!b.closest('nav, [role=navigation]') && !b.closest('main, article, aside, [role=main]'));
   const named = (b) => /\b(menu|navigation)\b/i.test((b.getAttribute('aria-label') || '') + ' ' + b.textContent);
-  const toggle = [...document.querySelectorAll('button, summary, [role=button]')].find((b) => vis(b) &&
-    (named(b) || (inChrome(b) && (b.tagName === 'SUMMARY' || b.hasAttribute('aria-expanded') || b.hasAttribute('aria-controls')))));
+  const candidates = [...document.querySelectorAll('button, summary, [role=button]')].filter((b) =>
+    named(b) || (inChrome(b) && (b.tagName === 'SUMMARY' || b.hasAttribute('aria-expanded') || b.hasAttribute('aria-controls'))));
+  // A menu the page names, or one in its banner, is the menu. Where it exists
+  // but is hidden at this width, the links show instead and there is no menu
+  // here; the next disclosure in some other <nav> (a docs rail's tree) is not
+  // a stand-in for it.
+  const primary = (b) => named(b) || !!b.closest('header, [role=banner]');
+  const pool = candidates.some(primary) ? candidates.filter(primary) : candidates;
+  const toggle = pool.find(vis);
   let menu = null;
   if (toggle) {
-    const name = () => ((toggle.getAttribute('aria-label') || '') + ' ' + (toggle.textContent || '')).replace(/\\s+/g, ' ').trim();
+    // The label as rendered: a menu that swaps "Menu" for "Close" with CSS keeps
+    // both words in its textContent at all times, so only innerText sees the swap.
+    const name = () => ((toggle.getAttribute('aria-label') || '') + ' ' + (toggle.innerText || toggle.textContent || '')).replace(/\\s+/g, ' ').trim();
+    // A native <summary> carries no aria-expanded attribute; the browser exposes
+    // its <details>'s open state as the expanded state, which is what counts.
+    const expanded = () => toggle.getAttribute('aria-expanded') ??
+      (toggle.tagName === 'SUMMARY' && toggle.parentElement && toggle.parentElement.tagName === 'DETAILS' ? String(toggle.parentElement.open) : null);
     // Opening is judged by what becomes visible anywhere: a menu panel is often
     // a sibling of the header, not inside it (arm test 3, tw-1).
     const allLinks = () => [...document.querySelectorAll('a')].filter(vis).length;
     const controlled = () => { const id = toggle.getAttribute('aria-controls'); const el = id && document.getElementById(id); return el ? vis(el) : null; };
-    const before = { links: allLinks(), controlled: controlled(), expanded: toggle.getAttribute('aria-expanded'), name: name(), html: toggle.innerHTML };
+    const before = { links: allLinks(), controlled: controlled(), expanded: expanded(), name: name(), html: toggle.innerHTML };
     toggle.click();
     await new Promise((r) => setTimeout(r, 350));
-    const after = { links: allLinks(), controlled: controlled(), expanded: toggle.getAttribute('aria-expanded'), name: name(), htmlChanged: toggle.innerHTML !== before.html };
+    const after = { links: allLinks(), controlled: controlled(), expanded: expanded(), name: name(), htmlChanged: toggle.innerHTML !== before.html };
     toggle.focus();
     toggle.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
     document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
@@ -5794,7 +5831,7 @@ var PROBE_SCRIPT = `(async () => {
       expandedBefore: before.expanded, expandedAfter: after.expanded,
       opened: after.links > before.links || (before.controlled === false && after.controlled === true),
       labelChanged: after.name !== before.name || after.htmlChanged,
-      escapeCloses: toggle.getAttribute('aria-expanded') !== 'true' && allLinks() <= before.links,
+      escapeCloses: expanded() !== 'true' && allLinks() <= before.links,
       focusReturned: document.activeElement === toggle,
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jig-ui",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "A design system for coding agents. 143 numbered UI rules, brand x mode design tokens, and an installer for Claude Code, Codex, Cursor and opencode.",
   "license": "Apache-2.0",
   "type": "module",