# S04: ToC Modernization — UAT

**Milestone:** M016
**Written:** 2026-04-03T05:55:24.264Z

# S04: ToC Modernization — UAT

## Preconditions
- Frontend deployed (or `npm run dev` on local)
- At least one technique page with v2 body_sections_format and 4+ sections (H2 headings with H3 subsections)

## Test Cases

### TC1: ToC renders in sidebar, not in prose
1. Navigate to a v2 technique page (e.g., one with multiple sections)
2. **Expected:** ToC appears at the top of the right sidebar column, not inside the main prose area
3. **Expected:** Heading reads "On this page"
4. **Expected:** Items are an unordered list (no numbered counters)

### TC2: Left accent bar styling
1. On the same technique page, inspect the ToC container
2. **Expected:** A 2px solid cyan left border (--color-accent) is visible on the ToC nav element
3. **Expected:** No card background, no rounded card border

### TC3: Hover states on ToC links
1. Hover over a section link in the ToC
2. **Expected:** Background changes to a subtle accent color (--color-accent-subtle, ~10% opacity)
3. Hover over a subsection (indented) link
4. **Expected:** Same hover background treatment

### TC4: Active section highlighting on scroll
1. Scroll down through the technique page content
2. **Expected:** As each H2 section enters the top ~30% of the viewport, its ToC link gains an active highlight (stronger background at --color-accent-focus ~15% opacity, font-weight 500)
3. Continue scrolling to the next section
4. **Expected:** Active highlight moves to the new section; previous section loses highlight
5. Scroll to an H3 subsection
6. **Expected:** The subsection link in the ToC also gains active styling

### TC5: Sticky behavior
1. On a long technique page, scroll past the sidebar content
2. **Expected:** ToC remains visible (sticky positioning) as you scroll through the article
3. **Expected:** ToC doesn't overlap or clip the main content column

### TC6: v1 format pages have no ToC
1. Navigate to a technique page with v1 body_sections_format (if any exist)
2. **Expected:** No ToC appears in the sidebar

### TC7: Short page with few sections
1. Navigate to a technique page with only 1-2 sections
2. **Expected:** ToC still renders correctly with 1-2 items, no visual glitches

### TC8: Build verification
1. Run `cd frontend && npm run build`
2. **Expected:** Zero errors, zero warnings, clean build output
