# S04: Accessibility & SEO Fixes

**Goal:** Every page has a single H1, skip-to-content link, AA-compliant text contrast, and a descriptive browser tab title.
**Demo:** After this: Every page has single H1, skip-to-content link, AA contrast text, and descriptive browser tab title.

## Tasks
- [x] **T01: Demoted nav brand to span, promoted page headings to h1, added skip-to-content link, and raised muted text contrast to AA compliance** — Three accessibility fixes that all touch App.tsx/App.css and page heading elements:

1. **Heading hierarchy (R022):** Demote `<h1>Chrysopedia</h1>` in App.tsx nav to `<span>`. Update `.app-header h1` CSS rule to `.app-header__brand span`. Promote `<h2>` to `<h1>` on pages that lack one: TopicsBrowse, CreatorsBrowse, SubTopicPage, AdminReports, AdminPipeline. Add `<h1>` to SearchResults (currently has no heading). Fix heading level skips in Home.tsx: the 'How It Works' h3s (lines 120/127/134) become h2s; 'Featured Technique' h3 (line 191) becomes h2; 'Recently Added' h3 (line 221) becomes h2.

2. **Skip-to-content link (R023):** Add `id="main-content"` to the `<main>` tag in App.tsx. Add `<a href="#main-content" className="skip-link">Skip to content</a>` as the first child of `.app`. Add `.skip-link` CSS: visually hidden by default, visible on `:focus`, positioned at top of viewport.

3. **Contrast fix (R024):** Change `--color-text-muted` from `#6b6b7a` to `#828291` in App.css `:root` block. This achieves 5.05:1 on page bg and 4.56:1 on surface bg — both above AA 4.5:1 threshold.
  - Estimate: 30m
  - Files: frontend/src/App.tsx, frontend/src/App.css, frontend/src/pages/Home.tsx, frontend/src/pages/TopicsBrowse.tsx, frontend/src/pages/CreatorsBrowse.tsx, frontend/src/pages/SubTopicPage.tsx, frontend/src/pages/SearchResults.tsx, frontend/src/pages/AdminReports.tsx, frontend/src/pages/AdminPipeline.tsx
  - Verify: cd frontend && npx tsc --noEmit && npm run build
- [x] **T02: Created useDocumentTitle hook and wired descriptive, route-specific browser tab titles into all 10 page components** — Create a `useDocumentTitle` custom hook and call it from every page component so browser tabs show descriptive, route-specific titles.

1. Create `frontend/src/hooks/useDocumentTitle.ts` with a hook that sets `document.title` on mount and when the title string changes. Reset to 'Chrysopedia' on unmount (cleanup).

2. Wire the hook into all 10 page components with these title patterns:
   - Home: `Chrysopedia — Production Knowledge, Distilled`
   - TopicsBrowse: `Topics — Chrysopedia`
   - SubTopicPage: `{subtopic} — {category} — Chrysopedia` (dynamic, updates when data loads)
   - CreatorsBrowse: `Creators — Chrysopedia`
   - CreatorDetail: `{name} — Chrysopedia` (dynamic, updates when creator loads)
   - TechniquePage: `{title} — Chrysopedia` (dynamic, updates when technique loads)
   - SearchResults: `Search: {query} — Chrysopedia` (dynamic, updates with query param)
   - About: `About — Chrysopedia`
   - AdminReports: `Content Reports — Chrysopedia`
   - AdminPipeline: `Pipeline Management — Chrysopedia`

3. For dynamic pages (SubTopicPage, CreatorDetail, TechniquePage, SearchResults), call the hook with the resolved value so the title updates when async data loads. Use a fallback like `Chrysopedia` while loading.
  - Estimate: 25m
  - Files: frontend/src/hooks/useDocumentTitle.ts, frontend/src/pages/Home.tsx, frontend/src/pages/TopicsBrowse.tsx, frontend/src/pages/SubTopicPage.tsx, frontend/src/pages/CreatorsBrowse.tsx, frontend/src/pages/CreatorDetail.tsx, frontend/src/pages/TechniquePage.tsx, frontend/src/pages/SearchResults.tsx, frontend/src/pages/About.tsx, frontend/src/pages/AdminReports.tsx, frontend/src/pages/AdminPipeline.tsx
  - Verify: cd frontend && npx tsc --noEmit && npm run build
