UI Component Library Sprint Plan — Cross-Functional War Room Output¶

Context: ~405 issues from UI Component Library Deep-Dive across 98 files (40 ui/ + 34 custom/ + 15 editor/ + 9 layout/) — ~13,700 LOC Generated: 2026-04-13 | Method: Cross-Functional War Room (PM + Engineer + Designer) Participants: PM (user impact), Engineer (effort/risk), Designer (UX/a11y impact) Related: Deep-Dive: UI Component Library | Attack Scenarios Severity Snapshot: 9 Critical · 40 High · ~160 Medium · ~200 Low · 14 confirmed dead files (~2,400 LOC)

Triage Summary¶

North Star: Every component in src/components/ renders correctly, passes keyboard/screen-reader checks, has a single canonical import path per responsibility, and no consumer reaches for a native element because the library wrapper is broken.

Ship Blockers (Pre-Release Gate)¶

Timeline: ~4 hours, 1 developer Exit criteria: Zero crashes on default props. No XSS in editor embeds. All 9 deep-dive Criticals (C1–C9) closed. Customer-visible broken UI fixed. Progress: 18 / 18 resolved ✅ — C1, C2a, C2b, C3, C4, C5, C6, C7, C8a, C8b, C8c, C9, SEC-1, SEC-2, UI-1, UI-2, UI-3, UI-4, UI-5, UI-6, UI-7 all landed. SEC-1 is in enforcing mode (non-allowlisted resources blocked). All exit criteria for the Pre-Release Gate are met.

Ship Blocker Verification Checklist¶

• Editor opens without React error boundary firing (C1)
• <Input size="small" /> renders with visible height (C2)
• Iframe embed rejects javascript: URL and non-allowlisted domains (C3)
• Unauthorized page redirect happens without "Cannot update during render" console warning (C4)
• createEditor.jsx file deleted, no broken imports (C5)
• Popover renders with shadow removed via className (C6)
• <PricingPlan /> with no data prop does not throw (C7)
• Selected tab shows gold underline; selected multi-select chip shows gold background (C8)
• All destructive confirmation modals (delete user, delete blog, delete role, etc.) are focus-trapped and Escape-blocked (C9)
• curl -I on any page returns Content-Security-Policy, X-Frame-Options, Referrer-Policy headers (SEC-1, enforcing mode)
• Header skeleton circles are round (UI-1)
• Breadcrumb2 gradient renders on page detail views (UI-2)
• No console.log output from /editor or /blogs/create during blog authoring (UI-3)
• TimePicker icon matches selected time (UI-4)
• Dashboard KPI chart tooltip displays 0 values (UI-7)

Sprint 1: Accessibility Floor + Component Unification (Week 1)¶

Timeline: ~20 hours, 1 developer North Star: Keyboard users can complete every core flow (login, create blog, create user, delete record). There is exactly one canonical Button, one canonical Input, one canonical modal system. Dark mode works everywhere. Exit criteria: axe-core audit of login/dashboard/blog-create/users pages returns 0 criticals. Pages consume only canonical components.

Modal System Consolidation (5 hrs)¶

Progress: 4 / 4 resolved ✅ — S1-1, S1-2, S1-3, S1-4 all landed. custom/modal.jsx has focus trap, scroll lock (with stacked-modal counter + scrollbar-gutter compensation), aria-labelledby via useId + ModalLabelContext, and isClosingRef guard. custom/dialog-modal.jsx is the Radix-backed drop-in with matching Modal/ModalHeader/ModalBody/ModalFooter API, max-h-[calc(100dvh-2rem)] flex flex-col viewport cap, and self-contained ModalBody scroll (flex-1 min-h-0 overflow-y-auto). All 3 hand-rolled inline modals migrated to DialogModal.

Canonical Component Unification (4 hrs)¶

Progress: 6 / 6 resolved ✅ — S1-5, S1-6, S1-7, S1-8, S1-9, S1-10 all landed. custom/button is documented as the canonical interactive button and the duplicate secondary / orphan primary variants are gone. ui/button gets a visible focus-visible ring on every variant. Blog form title/slug are now ui/Input. The three raw checkboxes in login / users / blogs are now Controller-wrapped custom/Checkbox. ui/textarea accepts a forwarded ref via the React 19 ref-as-prop pattern (merged with internal auto-resize ref), and both ui/textarea + custom/textarea expose className instead of the old textareaClass prop.

Form Field Accessibility (3 hrs)¶

Progress: 4 / 4 resolved ✅ — S1-11, S1-12, S1-13, S1-14 all landed. All 6 form wrappers (input, checkbox, textarea, radio, date-picker, file-upload) now expose dynamic ${id}-error / ${id}-description IDs, wire aria-invalid / aria-required / aria-describedby onto the underlying control (or a role="group" wrapper for compound date pickers), render description AND error simultaneously, show the accessible password toggle button with aria-pressed, and the file-upload has real onDrop / onDragOver / onDragLeave drag-and-drop with a border-primary bg-primary/5 drag-over state.

Interactive Component A11y (4 hrs)¶

Progress: 5 / 5 resolved ✅ — S1-15, S1-16, S1-17, S1-18, S1-19 all landed. The MultiSelect in custom/select.jsx now exposes a full ARIA combobox + listbox with keyboard navigation (Arrow keys, Home/End, Enter, Escape, Tab) and filters/displays by label rather than the opaque value. ui/loading.jsx is now a role="status" live region with an sr-only label. All 3 carousel variants in custom/carousel.jsx get keyboard arrow-key navigation, pause-on-hover/focus, focusable thumbnails, ARIA carousel semantics, and token-based arrow colors that survive dark mode. The tooltip's per-instance TooltipProvider was hoisted to a single shared <TooltipProvider delayDuration={200}> in the root layout, and the white-on-white light-mode contrast is fixed by switching to bg-popover text-popover-foreground semantic tokens.

Permission Wrapper Correctness (2 hrs)¶

Progress: 3 / 3 resolved ✅ — S1-20, S1-21, S1-22 all landed. The triple-nested blog.create / blog.update checks (page → page component → form component) are collapsed to a single outermost wrapper in app/(dashboard-layout)/dashboard/blogs/{create,[slug]}/page.js. PermissionWrapper and NavPermissionWrapper now share a unified mode="any" | "all" prop (default "any"), closing latent bugs in multi-permission consumers that were silently requiring ALL when they meant ANY. The user-form submit button is no longer misgated by role.view — it now uses user.create / user.update per mode. And hasPermission is memoized via useMemo so it only re-runs when the permission input or user permission list actually changes.

Sprint 1 Acceptance Test¶

1. Keyboard-only walkthrough:
   Tab through login → dashboard → create blog → create user
   Focus ring visible at every stop. No mouse used.

2. axe-core audit on:
   /login, /dashboard, /blogs/create, /users, /settings/profile
   → 0 critical violations

3. Dark mode:
   Switch theme, verify tabs (gold underline), multi-select chips,
   tooltips, carousel arrows, breadcrumb2 banner all visible.

4. Modal keyboard:
   Open any "Delete" confirmation → Escape does NOT dismiss
   Open any "Edit form" modal → Escape DOES dismiss, focus returns to opener

5. Form validation:
   Trigger error on any form field → screen reader announces error AND
   description (not just error). Required fields announced as required.

6. Multi-select:
   Type "admin" in role multi-select → filters by label
   Arrow keys navigate options → Enter selects → Escape closes

Sprint 2: Clean Foundation (Week 2–3)¶

Timeline: ~22 hours, 1–2 developers North Star: One component per responsibility. Dead code deleted. Editor no longer depends on private TipTap APIs. First component tests land. Exit criteria: ~14 dead files deleted. advance-table and data-table consolidated. Editor upgrade-safe. Component usage doc published. Test framework wired.

Dead Code Removal (1 hr)¶

Progress: 2 / 2 resolved ✅ — S2-1, S2-2 all landed. 6 confirmed-dead files deleted. layout/no-scroll-restoration.jsx kept — actively imported in app/layout.js. All 6 review-then-decide files kept as useful.

Component Deduplication (3.5 hrs)¶

Progress: 5 / 5 resolved ✅ — S2-3, S2-4, S2-5 implemented. S2-6, S2-7 closed (no work needed). advance-table.jsx deleted (1 consumer migrated to data-table). PaginationView extracted as shared pure component with 0-items guard. heading.jsx unified with variant prop; section-heading.jsx is now a thin wrapper.

Editor Hardening (3 hrs)¶

Progress: 3 / 3 resolved ✅ — S2-8, S2-9, S2-10 all landed. Private TipTap API access replaced with public BlockNote/stable TipTap equivalents. Editor blocks use CSS custom properties for dark mode. CodeBlock language prop wired to a visible label.

Token Cleanup (2 hrs)¶

Progress: 3 / 4 resolved ✅ — S2-12 already resolved by C8 ship blocker. S2-13, S2-14 implemented. S2-11 descoped — proposed replacement is semantically wrong (see notes).

Bug Fixes (4 hrs)¶

Progress: 9 / 9 resolved ✅ — S2-15, S2-16, S2-17, S2-19, S2-20, S2-21, S2-23 implemented. S2-18 and S2-22 already resolved in prior work.

Documentation + Testing (8.5 hrs)¶

Backlog (Ongoing)¶

Fix opportunistically when touching adjacent files. No dedicated sprint time needed.

Key Decisions Log¶

Sprint Board Visualization¶

┌─────────────────────────────────────────────────────────────────┐
│                SHIP BLOCKERS (pre-release gate)                 │
│                18 items · ~4 hrs · 1 developer                  │
│                                                                 │
│  [CRASH] C1 C2a C2b C4 C7 UI-5                                  │
│  [XSS]   C3 UI-6 SEC-1 SEC-2                                    │
│  [A11Y]  C9 (ConfirmationModal → AlertDialog)                   │
│  [VIS]   C6 C8a C8b C8c UI-1 UI-2 UI-4 UI-7                     │
│  [DEAD]  C5 (delete createEditor.jsx)                           │
│  [DEBUG] UI-3 (strip console.logs)                              │
│                                                                 │
│  EXIT: 9 Criticals closed. No default-prop crashes. CSP set.    │
└──────────────────────────┬──────────────────────────────────────┘
                           ▼
┌─────────────────────────────────────────────────────────────────┐
│            SPRINT 1 — "A11y Floor + Unification" (W1)           │
│                22 items · ~20 hrs · 1 developer                 │
│                                                                 │
│  [MODAL]  S1-1 S1-2 S1-3 S1-4                                   │
│  [UNIFY]  S1-5 S1-6 S1-7 S1-8 S1-9 S1-10                        │
│  [FORMS]  S1-11 S1-12 S1-13 S1-14                               │
│  [A11Y]   S1-15 S1-16 S1-17 S1-18 S1-19                         │
│  [PERM]   S1-20 S1-21 S1-22                                     │
│                                                                 │
│  EXIT: axe-core 0 criticals on 5 core pages. Keyboard works.    │
└──────────────────────────┬──────────────────────────────────────┘
                           ▼
┌─────────────────────────────────────────────────────────────────┐
│            SPRINT 2 — "Clean Foundation" (W2–3)                 │
│                24 items · ~22 hrs · 1–2 developers              │
│                                                                 │
│  [DEAD]   S2-1 S2-2 (~14 files, ~2,400 LOC deleted)             │
│  [DEDUP]  S2-3 S2-4 S2-5 S2-6 S2-7                              │
│  [EDITOR] S2-8 S2-9 S2-10                                       │
│  [TOKEN]  S2-11 S2-12 S2-13 S2-14                               │
│  [BUGS]   S2-15 S2-16 S2-17 S2-18 S2-19 S2-20 S2-21 S2-22 S2-23 │
│  [DOCS]   S2-24 S2-27                                           │
│  [TEST]   S2-25 S2-26 ★ (first component tests)                 │
│                                                                 │
│  EXIT: One component per responsibility. Editor upgrade-safe.   │
└──────────────────────────┬──────────────────────────────────────┘
                           ▼
┌─────────────────────────────────────────────────────────────────┐
│                    BACKLOG (ongoing)                             │
│                    33 items · fix when touching adjacent files   │
│                                                                 │
│  B1–B33: typos, dead state, minor a11y, editor polish, misc     │
└─────────────────────────────────────────────────────────────────┘

Total Effort Estimate¶

Remaining ~308 low-severity issues (mostly Medium/Low from the deep-dive) roll up under Backlog categories — they are covered by the "fix when touching adjacent files" rule rather than enumerated line-by-line.

Dependencies Between Items¶

• C9 (Ship) → S1-1 through S1-4 (Sprint 1 Modal track): ConfirmationModal rewrite must land first so custom/modal.jsx a11y work doesn't get undone by the migration.
• C8 (Ship) → S2-12 (Sprint 2 Gold alias): Gold token must exist before we can alias it to primary.
• S1-5 (Button canonical) → S2-25 (Button tests): Can't write button tests until there's one canonical button.
• S2-3 (Table dedup) → S2-25 (Table tests): Wait for consolidation before testing.
• S2-1 (Delete dead code) → S2-14 (Alias imports): Delete first so codemod runs over less surface.

Generated by BMAD Cross-Functional War Room — 2026-04-13 Cross-reference: Deep-Dive: UI Component Library Related security analysis: UI Component Attack Scenarios