> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/sessions/phase21-session06-responsive-layout-and-accessibility-pass/tasks.md). # Task Checklist **Session ID**: `phase21-session06-responsive-layout-and-accessibility-pass` **Total Tasks**: 18 **Estimated Duration**: 3-4 hours **Created**: 2026-06-29 *** ## Progress Summary | Metric | Value | | ------------------- | --------- | | Tasks Completed | 18 / 18 | | Estimated Remaining | 0 minutes | | Blockers | 0 | *** Legend: `[x]` completed; `[ ]` pending; `[P]` parallelizable; `[SNNMM]` session ref; `TNNN` task ID. *** ## Setup (3 tasks) * [x] T001 \[S2106] Verify analyzer-selected Session 06 scope, completed Session 05 validation, and app package context (`.spec_system/PRD/phase_21/session_06_responsive_layout_and_accessibility_pass.md`) * [x] T002 \[S2106] Audit focused-surface layout, accessibility, CSS, and browser-test baselines (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T003 \[S2106] Create the browser evidence ledger with desktop and small viewport slots (`.spec_system/specs/phase21-session06-responsive-layout-and-accessibility-pass/browser-verification.md`) *** ## Foundation (4 tasks) * [x] T004 \[S2106] Tune the shared focused-surface wrapper for viewport-safe sizing, max-height, panel scrolling, and stable close-control reachability (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T005 \[S2106] Add lifecycle-scoped background scroll containment with cleanup on scope exit for all acquired document or body state (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T006 \[S2106] Add modal focus containment and Tab/Shift+Tab cycling with cleanup on scope exit for all acquired listeners (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T007 \[S2106] Refine compact bottom-rail grid and host dimensions so unexpanded Quest Board, Orchestration, and War Room remain usable at small and desktop widths (`apps/web/src/App.tsx`) *** ## Implementation (5 tasks) * [x] T008 \[S2106] Add or refine shared focused-surface and scroll utility classes used by the host (`apps/web/src/index.css`) * [x] T009 \[S2106] Adjust cockpit layout constraints only where needed to prevent focused surfaces from being clipped by the shell grid (`apps/web/src/components/Layout.tsx`) * [x] T010 \[S2106] \[P] Extend host unit tests for sizing classes, scroll-lock cleanup, focus containment, and higher-layer Escape preservation (`apps/web/tests/BottomRailExpansionHost.test.tsx`) * [x] T011 \[S2106] \[P] Extend shell integration tests for all three expanded surfaces, compact fallback, focus return, and single mounted panel trees (`apps/web/tests/CockpitShell.test.tsx`) * [x] T012 \[S2106] \[P] Extend mobile accessibility tests for focused bottom-rail labels, touch targets, close controls, focus return, and no-certification boundaries (`apps/web/tests/MobileAccessibility.test.tsx`) *** ## Testing (6 tasks) * [x] T013 \[S2106] Add desktop/mobile browser checks for expanded Quest Board, Orchestration, and War Room size, overlap, text fit, and screenshots (`tests/e2e/app.e2e.ts`) * [x] T014 \[S2106] Run focused Vitest coverage for host, shell, mobile accessibility, and three bottom-rail panels (`npm test -- apps/web/tests/BottomRailExpansionHost.test.tsx apps/web/tests/CockpitShell.test.tsx apps/web/tests/MobileAccessibility.test.tsx apps/web/tests/OrchestrationPanel.test.tsx apps/web/tests/QuestBoard.test.tsx apps/web/tests/WarRoomPanel.test.tsx`) * [x] T015 \[S2106] Run the existing Phase 21 shortcut regression targets to confirm focus hardening did not break keyboard routes (`npm test -- apps/web/tests/keyboardShortcuts.test.ts apps/web/tests/commandCenterShortcuts.test.ts apps/web/tests/KeyboardShortcutsModal.test.tsx`) * [x] T016 \[S2106] Run the web typecheck for the package (`npm run typecheck --workspace @factionos/web`) * [x] T017 \[S2106] Run app desktop and app mobile Playwright coverage and update browser evidence with results (`npm run test:e2e -- --project app-desktop --project app-mobile tests/e2e/app.e2e.ts`) * [x] T018 \[S2106] Validate ASCII, LF, whitespace, and product-surface no-claim language for changed files (`git diff --check`) *** ## Completion Checklist * [x] All tasks marked `[x]` * [x] All tests and checks passing * [x] All files ASCII-encoded with LF line endings * [x] implementation-notes.md updated * [x] Ready for `implement` to start the implement -> creview -> validate sequence *** ## Next Steps Run the `implement` workflow step. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/sessions/phase21-session06-responsive-layout-and-accessibility-pass/tasks.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.