docs: document WCAG 2.4.7 focus-visible ring pattern from molecule-app PR #5

[technical-writer-agent]

Extends the Focus Management section in canvas-audit-items.md with:
- The canonical `focus-visible:ring-2` CSS pattern (ring-accent/50 +
  surface-token-aware offset) applied cross-product to all customer-facing
  buttons in molecule-app
- Component list: SignInButton, TermsGate, ApiTokens, billing-view
  (PlanCard + portal buttons), app-shell, simple-header,
  error-boundary, waitlist/page
- aria-current, aria-label, aria-busy, and inline loading-text
  patterns from the billing view
- `transition-colors` alongside focus rings for smooth state
  transitions

Cross-references molecule-app PR #5 (SHA bec9136).

docs/design-system/canvas-audit-items.md

@@ -2,7 +2,7 @@
 
 > **Status:** VERIFIED — Cross-referenced against molecule-core/canvas/src/ (2026-05-09)
 > **Author:** Core-FE (draft), Core-UIUX (verification)
-> **Updated:** 2026-05-10 with architecture structure + known issues + new test coverage (PR #205)
+> **Updated:** 2026-05-10 with architecture structure + known issues + new test coverage (PR #205) + billing page WCAG patterns (molecule-app PR #5)
 
 ## Canvas Stack (Verified)
 
@@ -94,7 +94,29 @@ PR: `fix/ink-soft-wcag-contrast`.
 - Skip link → `#canvas-main` ✅
 - `aria-label` on ReactFlow container ✅
 - Focus trap in modals via Radix ✅
-- Focus ring: `focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950`
+- Focus ring: `focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950` (canvas) ✅
+- **WCAG 2.4.7 focus-visible ring pattern** (cross-product, molecule-app): Applied to all customer-facing buttons to fix keyboard-only users not seeing which control is focused (browser-default outline suppressed by Tailwind reset). Pattern:
+
+```css
+focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2 focus-visible:ring-offset-<surface-token>
+```
+
+Where `<surface-token>` is chosen per context:
+- Page-level buttons → `ring-offset-surface`
+- In-header/topbar buttons → `ring-offset-surface-elevated`
+
+Components fixed (molecule-app PR #5 / SHA `bec9136`):
+- `SignInButton` (landing, pricing, all unauthed pages)
+- `TermsGate` "I agree" button
+- `ApiTokens` "Manage keys on canvas" link
+- `billing-view` PlanCard: `aria-current`, `aria-label` on current plan; upgrade buttons: `aria-busy`, loading inline text
+- `billing-view` portal buttons: `aria-busy`, inline spinner + span for loading state
+- `app-shell` "+ New Workspace" CTA + Notifications bell
+- `simple-header` "Sign out" text button (added padding so ring has room to render)
+- `error-boundary` "Try again" retry button
+- `waitlist/page` "Request access" submit button
+
+The `transition-colors` class is also added alongside the focus ring so the button's appearance transitions smoothly between hover and focus states.
 
 ### Accessibility Tree ✅
 - Canvas is in accessibility tree (React Flow DOM nodes)
@@ -130,3 +152,4 @@ PR: `fix/ink-soft-wcag-contrast`.
 
 *Verified 2026-05-09 by Core-UIUX against molecule-core/canvas/src/*
 *Updated 2026-05-10: keyboard shortcut dialog (PR #175) + keyboard node drag (PR #182) + keyboard edge anchors (PR #190) + keyboard node resize (PR #192) + screen reader announcements (PR #172) + text-ink-soft WCAG AA fix + Next.js 15.5.15 + component test coverage (PR #205: Tooltip, Legend, TermsGate, ApprovalBanner)*
+*Updated 2026-05-10: WCAG 2.4.7 focus-visible ring pattern documented (molecule-app PR #5 / SHA `bec9136`), including billing view aria-current/aria-busy patterns. See Focus Management section.*