anentrypoint-design 0.0.388 → 0.0.390

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.388",
+  "version": "0.0.390",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",
@@ -98,7 +98,11 @@
     "docs:components": "node scripts/generate-component-docs.mjs",
     "lint:component-docs": "node scripts/generate-component-docs.mjs --check",
     "generate:ui-kits": "node scripts/generate-ui-kit-scaffolds.mjs",
-    "generate:preview-index": "node scripts/generate-preview-index.mjs"
+    "generate:preview-index": "node scripts/generate-preview-index.mjs",
+    "a11y": "node scripts/a11y-audit.mjs",
+    "a11y:baseline": "node scripts/a11y-audit.mjs --write-baseline",
+    "visual": "node scripts/visual-baseline.mjs check",
+    "visual:update": "node scripts/visual-baseline.mjs update"
   },
   "repository": {
     "type": "git",

package/src/components/chat/message.js

@@ -71,8 +71,16 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
         }, 'retry') : null)];
     const reactionRow = reactions && reactions.length
         ? h('div', { class: 'chat-reactions' },
-            ...reactions.map((r, i) => h('span', { class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i, 'aria-label': `${r.emoji} reaction (${String(r.count)} ${String(r.count) === '1' ? 'reaction' : 'reactions'})${r.you ? ' - you reacted' : ''}` },
-                h('span', { class: 'e', 'aria-hidden': 'true' }, r.emoji), h('span', { class: 'n', 'aria-hidden': 'true' }, String(r.count)))))
+            // A bare <span> has no role, so it can carry no accessible name —
+            // an aria-label here was silently DISCARDED and the whole reaction
+            // announced as nothing, while aria-hidden suppressed the only real
+            // text. So the visible label/count stay in the accessibility tree
+            // as content, and an .sr-only span supplies just the wording the
+            // visuals imply but do not spell out.
+            ...reactions.map((r, i) => h('span', { class: 'rxn' + (r.you ? ' you' : ''), key: 'r' + i },
+                h('span', { class: 'e' }, r.emoji),
+                h('span', { class: 'n' }, String(r.count)),
+                h('span', { class: 'sr-only' }, ` ${String(r.count) === '1' ? 'reaction' : 'reactions'}${r.you ? ', you reacted' : ''}`))))
         : null;
     const tickNode = resolvedWho === 'you' && receipt
         ? h('span', { class: 'tick' + (receipt === 'read' ? ' read' : ''), role: 'img', 'aria-label': receipt === 'read' ? 'message read' : 'message sent' }, Icon(receipt === 'read' ? 'check-check' : 'check', { size: 14 }))

package/src/components/chat/threads.js

@@ -71,7 +71,12 @@ export const AICAT_FACE = ` /\\_/\\\n( o.o )\n > ^ <`;
 
 export function AICatPortrait({ name = 'aicat', status = 'idle', face } = {}) {
     return h('div', { class: 'aicat-portrait' },
-        h('pre', { class: 'aicat-face', 'aria-label': `${name} portrait` }, face || AICAT_FACE),
+        // role="img" collapses the ASCII art into a single named image for a
+        // screen reader (otherwise the slashes and parens are read out
+        // character by character as text). It is also what makes the
+        // aria-label legal here: a bare <pre> has no role and so can carry no
+        // accessible name, exactly like the chat reaction spans.
+        h('pre', { class: 'aicat-face', role: 'img', 'aria-label': `${name} portrait` }, face || AICAT_FACE),
         h('div', { class: 'aicat-meta' },
             h('span', { class: 'name' }, name),
             h('span', { class: 'status', 'aria-label': `status: ${status}` }, h('span', { class: 'dot ds-dot ds-dot-on', 'aria-hidden': 'true' }), ' ', status)

package/src/components/community/navigation.js

@@ -46,7 +46,7 @@ export function ChannelItem({ id, name, type = 'text', active, voiceActive, voic
     const ICON_FOR = CHANNEL_ICON_FOR;
     const icon = Icon(ICON_FOR[type] || 'hash', { size: 15 });
     const handleActionClick = (a, e) => { e.stopPropagation(); a.onClick && a.onClick(id, e); };
-    return h('div', { class: 'cm-channel-item-wrap', 'data-channel-wrap': id },
+    return h('div', { class: 'cm-channel-item-wrap', 'data-channel-wrap': id, role: 'listitem' },
         h('div', {
             class: 'cm-channel-item' + (active ? ' active' : '') + (voiceActive ? ' voice-active' : '') + (voiceConnecting ? ' voice-connecting' : ''),
             'data-id': id,
@@ -72,7 +72,15 @@ export function ChannelItem({ id, name, type = 'text', active, voiceActive, voic
                 }
             },
             tabindex: '0',
-            role: 'option'
+            // NOT role="option": this is channel NAVIGATION, not a select-one
+            // listbox — activating a row changes the view, and each row also
+            // contains its own action buttons, which `option` forbids (its
+            // children must be presentational). A link inside a list is the
+            // structure a screen reader should announce, and the current
+            // channel is conveyed by aria-current="page", the navigation
+            // idiom, rather than aria-selected.
+            role: 'link',
+            'aria-current': active ? 'page' : null
         },
             h('span', { class: 'cm-ch-icon' + (voiceActive ? ' voice-active-badge' : ''), 'data-voice-active': voiceActive ? 'true' : null }, icon),
             voiceConnecting ? h('span', { class: 'cm-ch-spinner', title: 'Connecting…', 'aria-label': 'Connecting to voice channel…' }) : voiceActive ? h('span', { class: 'cm-ch-voice-badge', title: 'Voice active', 'aria-label': 'Voice channel active' }) : null,
@@ -108,7 +116,10 @@ export function ChannelCategory({ id, name, channels = [], collapsed, activeId,
             extraButton ? h('button', { class: 'cm-cat-extra', onclick: (e) => { e.stopPropagation(); extraButton.onClick && extraButton.onClick(id, e); }, 'aria-label': extraButton.title || 'Category action' }, extraButton.icon || extraButton.label || '+') : null,
             onAddChannel ? h('button', { class: 'cm-cat-add', onclick: (e) => { e.stopPropagation(); onAddChannel(id); }, 'aria-label': 'Add channel to ' + name }, '+') : null
         ),
-        collapsed ? null : h('div', { class: 'cm-cat-channels' },
+        // role=list + role=listitem on each wrap: the channel rows are a real
+        // list of navigation targets, so a screen reader announces position
+        // and count ("3 of 7") instead of a flat run of links.
+        collapsed ? null : h('div', { class: 'cm-cat-channels', role: 'list', 'aria-label': name + ' channels' },
             ...channels.map(c => ChannelItem({
                 ...c,
                 draggable: channelDraggable,

package/src/components/shell/app-shell.js

@@ -13,7 +13,13 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
     return h('header', { class: 'app-topbar', role: 'banner' },
         Brand({ name: brand, leaf }),
         search ? h('label', { class: 'app-search' },
-            h('span', { class: 'icon', 'aria-hidden': 'true' }, 'search'),
+            // Line-icon, not the literal word "search" as a pseudo-glyph: the
+            // text stand-in inherited .app-search .icon's 0.6 opacity, which
+            // dropped --fg-3 to 3.74:1 on --bg-2 and failed AA as real text.
+            // An SVG is decorative (aria-hidden) rather than text, so the
+            // contrast rule no longer applies to it and the affordance stops
+            // depending on a colour value at all.
+            h('span', { class: 'icon', 'aria-hidden': 'true' }, Icon('search', { size: 15 })),
             // `search` is either a plain placeholder string (renders the
             // default uncontrolled input) or a caller-built VElement (has
             // .type/.props — e.g. a controlled <input> wired to app state)
@@ -186,9 +192,15 @@ export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
         h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
             h('div', { class: 'app-side-scrim', 'aria-hidden': 'true', onclick: (e) => toggleSide(false, e.currentTarget) }),
             h('div', { class: 'app-side-shell', id: 'app-side-shell', onclick: (e) => { if (e.target.closest('a')) toggleSide(false, e.currentTarget); } }, sideNode),
-            // tabindex=-1 so the skip-link (href="#app-main") actually moves
-            // keyboard focus into the main region, not just scroll to it.
-            h('main', { class: 'app-main' + (narrow ? ' narrow' : ''), id: 'app-main', tabindex: '-1' }, ...(Array.isArray(main) ? main : [main]))
+            // tabindex=0 (not -1): .app-main is a scroll container
+            // (overflow:auto), so it must be reachable by Tab for a
+            // keyboard-only user to scroll it with the arrow keys at all —
+            // tabindex=-1 made it focusable only programmatically, which
+            // satisfied the skip-link but left the region unscrollable
+            // without a pointer. 0 keeps the skip-link target working AND
+            // puts the region in the tab order. <main> is a landmark, so it
+            // is already named for assistive tech without an aria-label.
+            h('main', { class: 'app-main' + (narrow ? ' narrow' : ''), id: 'app-main', tabindex: '0' }, ...(Array.isArray(main) ? main : [main]))
         ),
         status || null
     );

package/src/components/shell/icons.js

@@ -11,6 +11,7 @@ const h = webjsx.createElement;
 // coherent line-icon set instead of multicolor OS emoji. 16px box, 1.6 stroke.
 export const ICON_PATHS = {
     lock: '<rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>',
+    search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>',
     mic: '<path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>',
     'mic-off': '<path d="M9 9v2a3 3 0 0 0 4.5 2.6M15 11V6a3 3 0 0 0-5.9-.8"/><path d="M5 11a7 7 0 0 0 11.5 5.4M12 18v3"/><path d="m4 4 16 16"/>',
     speaker: '<path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/>',

package/src/components/shell/workspace-columns.js

@@ -101,16 +101,37 @@ export function WsResizer(col) {
         document.body.style.cursor = 'col-resize';
     };
     const [lo, hi] = WS_RESIZE_CLAMP[col] || [120, 600];
-    // Seed aria-valuenow from the rendered track width so AT announces real widths.
+    // Seed aria-valuenow from the rendered track width so AT announces real
+    // widths. Deferred a frame: the resizers are rendered as the LAST children
+    // of .ws-shell, so at ref time the .ws-<col> track is not in the DOM yet
+    // and this measured nothing — aria-valuenow was simply never set, which is
+    // what `aria-required-attr` (role=separator requires it) was reporting.
+    // The markup below now also ships a valid value up-front, so the attribute
+    // is present even if this correction never runs.
     const seedNow = (el) => {
         if (!el) return;
-        const track = el.closest('.ws-shell') && el.closest('.ws-shell').querySelector('.ws-' + col);
-        if (track) { const w = Math.round(track.getBoundingClientRect().width); el.setAttribute('aria-valuenow', String(w)); el.setAttribute('aria-valuetext', w + ' pixels'); }
+        const measure = () => {
+            const shell = el.closest('.ws-shell');
+            const track = shell && shell.querySelector('.ws-' + col);
+            if (!track) return;
+            const w = Math.round(track.getBoundingClientRect().width);
+            if (!w) return;
+            el.setAttribute('aria-valuenow', String(w));
+            el.setAttribute('aria-valuetext', w + ' pixels');
+        };
+        if (typeof requestAnimationFrame === 'function') requestAnimationFrame(measure);
+        else measure();
     };
     return h('div', {
         class: 'ws-resizer ws-resizer-' + col, role: 'separator', tabindex: '0',
         'aria-orientation': 'vertical', 'aria-label': 'resize ' + col + ' column (arrow keys)',
-        'aria-valuemin': String(lo), 'aria-valuemax': String(hi), 'aria-valuetext': String(hi) + ' pixels',
+        // valuenow/valuetext seeded at the clamp MINIMUM (and corrected to the
+        // measured width by seedNow on the next frame). The previous markup
+        // omitted aria-valuenow entirely — required by role=separator when it
+        // is focusable — and hardcoded valuetext to the clamp MAXIMUM, so the
+        // announced width contradicted the actual one.
+        'aria-valuemin': String(lo), 'aria-valuemax': String(hi),
+        'aria-valuenow': String(lo), 'aria-valuetext': String(lo) + ' pixels',
         onpointerdown: onDown, onkeydown: onKey, ref: seedNow,
     });
 }

package/src/css/app-shell/chat-polish.css

@@ -501,8 +501,17 @@
   display: inline-flex; align-items: center; justify-content: center;
   background: color-mix(in oklab, var(--mascot) 22%, var(--bg-2));
   border-radius: 50%; flex-shrink: 0;
+  /* Cancels the global `pre { overflow-x: auto }`. This is a fixed 32px
+     decorative chip, so the art overflowing its own box made it an
+     unreachable keyboard scroll container (WCAG scrollable-region-focusable)
+     rather than something a user could ever usefully scroll. */
+  overflow: hidden;
 }
 .aicat-meta { display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
+/* --mascot-deep is now theme-tuned at the token layer (paper #B81F63 /
+   ink #FF5C9E), so this needs no per-theme override. The previous
+   [data-theme="dark"],[data-theme="ink"] override missed data-theme="auto"
+   under OS-dark, which is how the kits actually render — the author name
+   fell back to the paper tone at 3.13:1 on ink. */
 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
-[data-theme="dark"] .aicat-meta .name, [data-theme="ink"] .aicat-meta .name { color: var(--mascot); }