2 Commits

Author	SHA1	Message	Date
shankar0123	1fcb05181d	feat(frontend): Phase 6 Locale + Date/Time Discipline — close I18N-H1 + I18N-H2 + I18N-H3 + I18N-M2 ... Closes the Phase 6 batch from cowork/frontend-design-audit.html: makes every timestamp in the dashboard byte-identical to its server-audit-log equivalent under UTC, makes every number format browser-locale-aware, and builds the i18n-ready boundary without shipping a full i18n framework (deferred to Phase 10). ═════════════════════════ AUDIT VERIFICATION ═════════════════════════ • Q1 utils.ts hardcoded 'en-US' at lines 3 + 8 — confirmed • Q2 raw new Date(x).toLocaleString() sites — verified 8 sites across 6 pages (audit said "7+"): SessionsPage:178, SessionsPage:181 (last_seen, abs_expires) BreakglassPage:236, BreakglassPage:248 (last_pw_change, locked_until) GroupMappingsPage:206 (created_at) OIDCProvidersPage:434 (created_at) ApprovalsPage:379 (created_at) ObservabilityPage:71 (server_started) • Q3 no i18n framework — confirmed (no i18next/react-intl/@formatjs/ date-fns in web/package.json) • Q4 zero Intl.NumberFormat usage — confirmed (audit-accurate) • Q5 Tooltip API — `<Tooltip content={…}>{singleChild}</Tooltip>`, Floating-UI-backed, aria-describedby wired • Q6 toFixed sites — 1 site in dashboard/charts.tsx (Recharts tooltip rate formatter); audit was vague but actual is minimal ═════════════════════════════ CLOSURES ═══════════════════════════════ I18N-H1 — drop hardcoded en-US in utils.ts • formatDate / formatDateTime now pass `undefined` for the locale arg, meaning the runtime uses navigator.language. Output SHAPE stable (month: 'short' etc.); LANGUAGE follows the browser. • New formatDateUTC / formatDateTimeUTC siblings force timeZone: 'UTC' for byte-equivalent display vs server audit log + journalctl. • New formatDateTimeInZone(iso, ianaTz) backs the Custom-TZ branch in operator settings; falls back to UTC on invalid IANA name (Intl throws RangeError; we catch + degrade gracefully). • Existing tests in utils.test.ts already used locale-tolerant assertions (.toContain('Jun')) so no test update needed. I18N-H3 — UTC display + operator-local hover + preference toggle • web/src/components/Timestamp.tsx — wraps a UTC-default string in the Phase 1 Tooltip showing the operator-local equivalent. Three modes: utc — display UTC (default; screen ≡ logs). local — display browser-local, hover shows UTC. custom — display configured IANA tz, hover shows UTC. • web/src/api/timestampPref.ts — typed localStorage helper with `certctl:timestamp-pref-changed` CustomEvent so live <Timestamp> components re-render without a page reload when the operator flips the toggle. • New "Timestamp display" card on AuthSettingsPage with radio selector + IANA-tz input that appears only when mode='custom'. I18N-H2 — migrate raw toLocaleString sites + CI guard • 8/8 raw `new Date(x).toLocaleString()` / `.toLocaleDateString()` sites migrated: SessionsPage — Timestamp (×2, last_seen + abs_expires) BreakglassPage — Timestamp (×2, last_password_change + locked_until) ApprovalsPage — Timestamp (created_at) ObservabilityPage — Timestamp (server_started) GroupMappingsPage — formatDate (date-only column) OIDCProvidersPage — formatDate (date-only column) • scripts/ci-guards/no-raw-toLocaleString.sh fails CI on any new raw new Date(x).toLocaleString[Date]Date call outside the canonical utils.ts impls. Tests + utils.ts itself are excluded. I18N-M2 — Intl.NumberFormat helpers • New web/src/api/format.ts exports formatNumber / formatCompact / formatPercent / formatBytes — all backed by Intl.NumberFormat constructed once at module load (NumberFormat construction is the expensive part; .format() is cheap). • Locale-tolerant test fixtures assert format SHAPE (e.g. "5[ .,]?432") not exact strings — so the CI runner's locale doesn't break assertions. • formatBytes uses SI-decimal scaling (1KB=1000B); manual fallback for old Safari that doesn't support `style: 'unit'`. ═══════════════════════════ AUDIT-ACCURACY CALLOUTS ════════════════════ (1) Audit said "7+ pages with raw .toLocaleString" — verified 8 raw SITES across 6 PAGES. Direction was right; counts were vague. (2) Audit said "no i18n framework + no Intl.NumberFormat" — both verified accurate (zero matches in production tsx). (3) Audit suggested SessionsPage / BreakglassPage / GroupMappings / OIDCProviders / Approvals / Observability "and others" — all six named confirmed; no "others" found. List was complete. ═══════════════════════════ VERIFICATION ════════════════════════════ • npx tsc --noEmit — exits 0 • New tests: utils 18/18 (preserved) + format 14/14 + Timestamp 6/6 = 38 new test assertions • Component suite (270/270 across api + Timestamp + Tooltip + sibs) • 7 migrated page suites — 62/62 green (Sessions / Approvals / Breakglass / GroupMappings / OIDCProviders / AuthSettings / Observability) • All 34 CI guards pass locally (new no-raw-toLocaleString.sh + existing no-unbound-label baseline bumped 132→134 for the 2 wrap-style implicit-association labels added on AuthSettings timestamp preference card; guard's blunt grep can't distinguish wrap from sibling labels — documented in the guard header). • npx vite build — ✓ in 2.69s • grep "'en-US'" web/src/api/utils.ts → 0 matches • grep "new Date.*\.toLocaleString\(\)" web/src --include='*.tsx' --exclude='*.test.*' → 0 raw sites outside utils.ts ═══════════════════════════ RESIDUAL RISK ════════════════════════════ • UTC default may surprise non-engineering users who expect their local timezone. Mitigation: the AuthSettings toggle gives them a one-click out to Local mode. Default UTC is the right safe default for an audit-log-paired tool. • formatBytes SI vs binary: the helper uses SI-decimal (1KB=1000B) by default. If memory/disk numbers in Observability tiles need binary scaling (1KiB=1024B), add a formatBytesBinary in a follow-up; for now those tiles either don't surface bytes or use server-provided pre-formatted strings. • i18n framework deferred: no react-i18next, no extraction pass. Phase 10 (when first multi-language customer asks) will swap the `undefined` locale arg here for a thread-through value; display code never touches Date.prototype.toLocaleString directly thanks to the no-raw-toLocaleString CI guard.	2026-05-14 17:10:19 +00:00
shankar0123	c9f932be65	feat(frontend): Phase 5 Accessibility + Forms — close FE-H3 + UX-H4 primitive + FE-M1 primitive + axe-core gate ... Closes the Phase 5 batch from cowork/frontend-design-audit.html: ships the joint UX-H4 + FE-M1 lever (FormField primitive + react-hook-form + zod schemas) and the FE-H3 fix (Headless UI Dialog focus trap on the 3 inline-managed modals), with an axe-core regression test + CI guard to prevent UX-H4 regressions. ═════════════════════════ AUDIT VERIFICATION ═════════════════════════ Confirmed live against the repo before implementing: • Q1 labels / htmlFor / input-id = 139 / 6 / 0 (audit said 138 / 6 / 0 — labels +1, otherwise accurate) • Q2 no form library installed (no react-hook-form, formik, @tanstack/react-form, final-form) • Q3 3 inline-managed dialog sites confirmed: SCEPAdminPage.tsx:272, AgentsPage.tsx:314, ESTAdminPage.tsx:281 • Q4 audit's top-6 list was OFF — actual top form-heaviest pages by useState count are: OIDCProviderDetailPage 21, AgentGroupsPage 18, CertificatesPage 17, CertificateDetailPage 14, BreakglassPage 13, ProfilesPage 13 — NOT the audit-suggested OnboardingWizard 5 (now split in Phase 4) / OIDCProvidersPage 8 / IssuersPage 11 / ProfilesPage 13 / TargetsPage 9 / ApprovalsPage 5. Audit's intuition skipped the higher-useState pages. • Q5 jest-dom imported in src/test/setup.ts — axe-core landed cleanly ═════════════════════════════ CLOSURES ═══════════════════════════════ UX-H4 (label/input binding) — FormField primitive shipped • web/src/components/FormField.tsx wraps a <label> + an input child and auto-generates a stable id via React 18's useId(); cloneElement threads that id onto BOTH the <label htmlFor> AND the child's id prop so the WCAG 1.3.1 binding holds by construction. Supports `required` (asterisk + aria-required), `description` (wires aria-describedby), `error` (aria-invalid + role=alert + extends aria-describedby). 7 tests pin the contract. FE-M1 (no form library) — react-hook-form + @hookform/resolvers + zod • Added react-hook-form 7.75, @hookform/resolvers 5.2, zod 4.4 as runtime deps; @axe-core/react, jest-axe, @types/jest-axe as devDeps • Representative migration of CreateTeamModalInline (inside onboarding/CertificateStep — operator's first-run experience) from 3-useState + manual handlers to useForm + zodResolver + FormField. Schema at pages/onboarding/team.schema.ts. • Per the audit's "top-6 only, primitive is the lever" rule, the other 5 audit-suggested pages migrate organically as feature work touches them — documented as Phase 5 follow-up. The FormField primitive is the leverage point; per-page migrations are mechanical applications. FE-H3 (no focus trap on modal pages) • New ModalDialog primitive at web/src/components/ModalDialog.tsx — Headless UI Dialog wrapper for arbitrary-content modals (complements ConfirmDialog which is confirm-only). Auto-emits role=dialog + aria-modal + aria-labelledby + ESC-to-close + backdrop-click-to-close + focus trap. • All 3 inline-managed modal sites migrated: • SCEPAdminPage ConfirmReloadModal • ESTAdminPage ConfirmReloadModal (data-testid preserved) • AgentsPage RetireAgentModal (3-mode: confirm / blocked / error — title + footer change per mode; body slot stays the same) • 37/37 existing modal-page tests stay green — no behavior change visible to the test suite, only the focus-trap + ESC handling. UX-H4 regression gate • web/src/test/a11y.test.tsx runs axe-core (not jest-axe — its `toHaveNoViolations` matcher uses jest's expect API which can't plug into Vitest's expect.extend; fails with "expectAssertion.call is not a function"). Direct axe.run + assert violations.length===0 gives the same gate with a readable failure message. • Scope: primitives, not page sweeps. Primitives carry the risk surface; pages compose them. 5 tests covering FormField (with + without description/error), Skeleton (all 4 variants), ModalDialog, Breadcrumbs. ~400ms total. • Skeleton.table's empty <th> cells are decorative shimmers inside a role=status + aria-busy=true tree — axe-core's `empty-table-header` rule doesn't model aria-busy gating, so it is suppressed for the Skeleton variant scan with a clear comment. • scripts/ci-guards/no-unbound-label.sh — fails CI if a new <label> without htmlFor lands. Baseline-driven (132 today) so the existing backlog doesn't block CI; every migration to FormField drops the baseline. `--strict` mode rejects any unbound label once the backlog clears. ═══════════════════════════ VERIFICATION ═════════════════════════════ • npx tsc --noEmit — exits 0 • New tests: FormField 7/7, ModalDialog 6/6, a11y 5/5 = 18/18 new • Component suite: 14 files / 150/150 green • Page suite (representative subset run): 16 files in first run (timeout truncated final summary) + 10 files / 48/48 in second run — all green • OnboardingWizard 4/4 (the migrated CreateTeamModalInline test case is the second one — `+ New team opens the inline modal, calls createTeam, invalidates the cache, and auto-selects the new team`) • SCEPAdminPage 20/20, ESTAdminPage 14/14, AgentsPage 3/3 — all 37 modal-page tests stay green after ModalDialog migration • npm run build ✓ in 3.27s • CI guard: bash scripts/ci-guards/no-unbound-label.sh — passes at baseline 132 (current unbound count matches; failure mode is only on increase). --strict path will fail until backlog clears. ═══════════════════════════ RESIDUAL RISK ════════════════════════════ • RHF migration risk: zod resolver's input/output type mismatch bit me once during this work (description: z.string().optional() gave Input: string|undefined vs Output: string after .default()). Both sides typed as string + defaultValues providing empty string fixes it; documented in team.schema.ts. Pattern applies to every future Zod schema with optional-but-empty-string fields. • The audit's "top-6" page list is stale (Phase 4 split OnboardingWizard; useState ranks shifted). Future RHF migrations should re-derive the priority list against live useState counts, not the audit's stamped names. • DataTable per-row React.memo (PERF-M1 follow-up from Phase 4) remains deferred — orthogonal to Phase 5 scope.	2026-05-14 16:44:37 +00:00