> 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/phase16-session01-responsive-and-accessibility-hardening/tasks.md). # Task Checklist **Session ID**: `phase16-session01-responsive-and-accessibility-hardening` **Total Tasks**: 21 **Estimated Duration**: 3-4 hours **Created**: 2026-06-02 *** ## Legend * `[x]` = Completed * `[ ]` = Pending * `[P]` = Parallelizable (can run with other \[P] tasks) * `[S1601]` = Session reference (16=phase number, 01=session number) * `TNNN` = Task ID *** ## Progress Summary | Category | Total | Done | Remaining | | -------------- | ------ | ------ | --------- | | Setup | 3 | 3 | 0 | | Foundation | 5 | 5 | 0 | | Implementation | 9 | 9 | 0 | | Testing | 4 | 4 | 0 | | **Total** | **21** | **21** | **0** | *** ## Setup (3 tasks) Initial configuration and environment preparation. * [x] T001 \[S1601] Verify Phase 16 Session 01 prerequisites, completed Phase 13-15 dependencies, package scripts, local dev or preview startup, and first-release route availability (`.spec_system/PRD/phase_16/session_01_responsive_and_accessibility_hardening.md`) * [x] T002 \[S1601] Inventory first-release routes, shared layouts, navigation controls, CTA patterns, content cards, legal pages, and product mockups for responsive/accessibility coverage (`.spec_system/specs/phase16-session01-responsive-and-accessibility-hardening/implementation-notes.md`) * [x] T003 \[S1601] Record the initial viewport, keyboard, focus, heading, landmark, contrast, mockup semantics, and reduced-motion risk matrix with explicit launch-blocker placeholders (`.spec_system/specs/phase16-session01-responsive-and-accessibility-hardening/implementation-notes.md`) *** ## Foundation (5 tasks) Core structures and base implementations. * [x] T004 \[S1601] Harden shared responsive wrapping, focus-visible treatment, contrast tokens, skip-target behavior, and reduced-motion primitives with no viewport-width font scaling (`public-website/src/styles/global.css`) * [x] T005 \[S1601] Verify and fix base document landmarks, main target wiring, page title flow, and layout semantics with stable focus movement after skip-link activation (`public-website/src/layouts/BaseLayout.astro`) * [x] T006 \[S1601] \[P] Harden desktop header navigation with platform-appropriate accessibility labels, visible focus, stable wrapping, and non-color-only active state (`public-website/src/components/navigation/Header.astro`) * [x] T007 \[S1601] \[P] Harden mobile navigation with keyboard open/close behavior, focus management, state reset on re-entry, explicit accessible names, and stable 360px layout (`public-website/src/components/navigation/MobileNavigation.astro`) * [x] T008 \[S1601] \[P] Harden footer navigation with accessible labels, visible focus, long-label wrapping, contrast-safe text, and non-color-only external link treatment (`public-website/src/components/navigation/Footer.astro`) *** ## Implementation (9 tasks) Main feature implementation. * [x] T009 \[S1601] \[P] Harden content page layout with ordered heading flow, landmark-compatible structure, long text wrapping, and reachable CTAs at target viewports (`public-website/src/layouts/ContentLayout.astro`) * [x] T010 \[S1601] \[P] Harden legal page layout with review-marker reachability, long policy text wrapping, ordered headings, and keyboard-visible legal navigation (`public-website/src/layouts/LegalLayout.astro`) * [x] T011 \[S1601] \[P] Harden blog/news article layout with metadata semantics, long-title wrapping, ordered headings, and readable content flow at 360px (`public-website/src/layouts/PostLayout.astro`) * [x] T012 \[S1601] \[P] Harden shared CTA links with accessible names, external destination labels, duplicate-label clarity, focus visibility, and stable text wrapping (`public-website/src/components/system/ButtonLink.astro`) * [x] T013 \[S1601] \[P] Harden blog/news cards with keyboard-reachable links, accessible names, ordered card headings, long-title wrapping, and non-color-only state treatment (`public-website/src/components/content/PostCard.astro`) * [x] T014 \[S1601] Harden homepage cockpit mockup with semantic labels, keyboard-safe controls, static sample context, reduced-motion fallback, and no color-only state (`public-website/src/components/marketing/HeroCockpit.astro`) * [x] T015 \[S1601] Harden battlefield preview with accessible state summaries, fallback text, non-color-only state, reduced-motion behavior, and no small-viewport clipping (`public-website/src/components/marketing/BattlefieldPreview.astro`) * [x] T016 \[S1601] Harden product proof panels with useful semantics, contrast-safe text, static-sample labels, non-color-only state, and reduced-motion-safe context (`public-website/src/components/marketing/ProductProofPanels.astro`) * [x] T017 \[S1601] Harden terminal-style mockups with code-like content wrapping, accessible labels, contrast-safe text, static-sample labels, and reduced-motion-safe behavior (`public-website/src/components/marketing/TerminalWindow.astro`) *** ## Testing (4 tasks) Verification and quality assurance. * [x] T018 \[S1601] Run public website typecheck, build, and deterministic link checker; resolve Astro, TypeScript, generated-route, or route-link failures without adding production dependencies (`public-website/package.json`) * [x] T019 \[S1601] Validate responsive behavior at 360px, 768px, 1280px, and 1440px or wider across representative first-release routes, then fix or record every overlap, clipping, horizontal spilling, and unstable layout issue (`.spec_system/specs/phase16-session01-responsive-and-accessibility-hardening/implementation-notes.md`) * [x] T020 \[S1601] Validate keyboard, focus, skip link, heading order, landmark, accessible-name, contrast, non-color-only-state, product mockup semantics, and reduced-motion behavior, then fix or record every launch blocker (`.spec_system/specs/phase16-session01-responsive-and-accessibility-hardening/implementation-notes.md`) * [x] T021 \[S1601] Confirm static-site privacy boundaries, no analytics or hosted-form behavior, ASCII encoding, Unix LF line endings, final QA evidence, and implementation-notes readiness for validate workflow (`.spec_system/specs/phase16-session01-responsive-and-accessibility-hardening/implementation-notes.md`) *** ## Completion Checklist Before marking session complete: * [x] All tasks marked `[x]` * [x] All tests passing * [x] All files ASCII-encoded * [x] implementation-notes.md updated * [x] Ready for the validate workflow step *** ## Next Steps Run the implement workflow step to begin AI-led implementation. --- # 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/phase16-session01-responsive-and-accessibility-hardening/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.