diff --git a/Dockerfile b/Dockerfile index 4917668b..3fda9b0e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -29,10 +29,15 @@ ENV PYTHONDONTWRITEBYTECODE=1 \ CODECITY_CACHE_ROOT=/cache \ UV_LINK_MODE=copy -# System deps. Pinned via apt repo of the base image; Dependabot bumps base. +# System deps. The base image's apt snapshot can lag published security fixes, +# so apply available upgrades before installing — Trivy fails CI on FIXED +# HIGH/CRITICAL OS CVEs (e.g. libcurl, pulled in by git), and waiting on a base +# image rebuild leaves the gate red. Dependabot still bumps the base tag. # Note: PID 1 init duties are handled by Docker's --init flag (compose: init: true), # so we don't install tini here. -RUN apt-get update && apt-get install -y --no-install-recommends \ +RUN apt-get update \ + && apt-get upgrade -y \ + && apt-get install -y --no-install-recommends \ git ca-certificates wget \ && rm -rf /var/lib/apt/lists/* diff --git a/app/package-lock.json b/app/package-lock.json index 876651e4..c4a1d3a3 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -23,6 +23,7 @@ "@types/node": "^25.6.0", "@types/three": "^0.184.0", "@vitest/coverage-v8": "^4.1.7", + "axe-core": "^4.12.1", "canvas": "^3.2.3", "eslint": "^10.3.0", "eslint-config-prettier": "^10.1.8", @@ -2003,6 +2004,16 @@ "js-tokens": "^10.0.0" } }, + "node_modules/axe-core": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz", + "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==", + "dev": true, + "license": "MPL-2.0", + "engines": { + "node": ">=4" + } + }, "node_modules/babel-plugin-transform-hook-names": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/babel-plugin-transform-hook-names/-/babel-plugin-transform-hook-names-1.0.2.tgz", diff --git a/app/package.json b/app/package.json index 13fe3651..c37f1b18 100644 --- a/app/package.json +++ b/app/package.json @@ -32,6 +32,7 @@ "@types/node": "^25.6.0", "@types/three": "^0.184.0", "@vitest/coverage-v8": "^4.1.7", + "axe-core": "^4.12.1", "canvas": "^3.2.3", "eslint": "^10.3.0", "eslint-config-prettier": "^10.1.8", diff --git a/app/src/components/BranchSelect/BranchSelect.tsx b/app/src/components/BranchSelect/BranchSelect.tsx index f0bddc79..3b62e8c2 100644 --- a/app/src/components/BranchSelect/BranchSelect.tsx +++ b/app/src/components/BranchSelect/BranchSelect.tsx @@ -73,17 +73,17 @@ export function BranchSelect({ url, value, onChange, onError }: BranchSelectProp return (
- + {state.status === BranchStatus.Loading && ( -
-
+
+ {hint &&
{hint}
} + {children} +
+
); } diff --git a/app/src/components/SegmentedSelect/SegmentedSelect.tsx b/app/src/components/SegmentedSelect/SegmentedSelect.tsx index f595ae26..11017fd7 100644 --- a/app/src/components/SegmentedSelect/SegmentedSelect.tsx +++ b/app/src/components/SegmentedSelect/SegmentedSelect.tsx @@ -14,24 +14,68 @@ export interface SegmentedSelectProps { options: SegmentedSelectOption[]; onCommit: (v: string) => void; describedBy?: string; + /** Names the radiogroup (the field label). */ + label?: string; } -export function SegmentedSelect({ value, options, onCommit, describedBy }: SegmentedSelectProps) { +export function SegmentedSelect({ + value, + options, + onCommit, + describedBy, + label, +}: SegmentedSelectProps) { + // A single-select radiogroup: arrow keys move + select (automatic activation), + // wrapping at the ends; Home/End jump. Focus follows to the checked option, + // which is the group's single tab stop (roving tabindex). + function onKeyDown(e: KeyboardEvent, idx: number) { + let next: number; + switch (e.key) { + case 'ArrowRight': + case 'ArrowDown': + next = (idx + 1) % options.length; + break; + case 'ArrowLeft': + case 'ArrowUp': + next = (idx - 1 + options.length) % options.length; + break; + case 'Home': + next = 0; + break; + case 'End': + next = options.length - 1; + break; + default: + return; + } + e.preventDefault(); + onCommit(options[next].value); + const group = (e.currentTarget as HTMLElement).parentElement; + (group?.children[next] as HTMLElement | undefined)?.focus(); + } + return ( - - {options.map((opt) => ( - - ))} + + {options.map((opt, idx) => { + const checked = opt.value === value; + return ( + + ); + })} ); } diff --git a/app/src/components/SelectionAnnouncer/SelectionAnnouncer.tsx b/app/src/components/SelectionAnnouncer/SelectionAnnouncer.tsx new file mode 100644 index 00000000..038e0ed5 --- /dev/null +++ b/app/src/components/SelectionAnnouncer/SelectionAnnouncer.tsx @@ -0,0 +1,39 @@ +// components/SelectionAnnouncer/SelectionAnnouncer.tsx — a visually-hidden live +// region that speaks the current city selection to screen readers. The canvas +// is a graphic and can't announce its own selection, so App mounts one of these +// and it mirrors the picker: whenever the selected building/street/tree/gem +// changes, the new selection is announced (WCAG 4.1.3 Status Messages). + +import { useComputed } from '@preact/signals'; +import { SCENE_HANDLE } from '@/state/stores/scene'; +import { NodeKind } from '@/types'; +import type { PickTarget } from '@/types'; + +function describe(sel: PickTarget | null): string { + if (!sel) return ''; + switch (sel.kind) { + case NodeKind.File: + return `Selected file: ${sel.file.path ?? sel.file.name}`; + case NodeKind.Directory: + return `Selected directory: ${sel.dir.path ?? sel.dir.name}`; + case NodeKind.Commit: + return `Selected commit ${sel.commit.sha.slice(0, 7)}, ${sel.commit.subject}`; + case NodeKind.Gem: + return 'Selected the repository'; + } +} + +export function SelectionAnnouncer() { + // Recomputes on every SCENE_HANDLE swap and picker-selection change. An equal + // string is deduped by the computed, so re-resolving the same selection across + // a rebuild doesn't re-announce. + const message = useComputed(() => { + const handle = SCENE_HANDLE.value; + return handle ? describe(handle.picker.selection.value) : ''; + }); + return ( +
+ {message.value} +
+ ); +} diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index 72255499..d8d3b975 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/app/src/components/Sidebar/Sidebar.tsx @@ -84,6 +84,9 @@ export interface SidebarProps { /** DOM id — drives CSS (e.g. #left-sidebar). */ id: string; side: SidebarSide; + /** Accessible name for the complementary landmark, so the two