# Transcript: keyboard-only before/after (demo store, fictional)

Video: `results/keyboard-before-after.mp4` (60 seconds, 1280×720, no audio). Captions: `results/keyboard-before-after.vtt`.

What it shows: the same keyboard-only shopping task on the fictional Kettlecrest demo store, first in the original ("before") version, then in the fixed ("after") version. The task: dismiss the first-visit newsletter popup, open the Ridgeline 40L Pack, choose color Slate and size L, add it to the cart, check that the cart drawer takes focus and announces the add, close it with Escape, and check that focus returns. A label in the top-right corner says "BEFORE — demo store (fictional)" or "AFTER — demo store (fictional)" throughout. Keys pressed and results appear in a caption bar at the bottom; green means a check passed, red means it failed, amber means the mouse was needed to continue.

This is a silent, scripted placeholder (Playwright drives the keyboard). It is not the VoiceOver recording.

## Before (original store)

- **00:00** BEFORE (demo store, fictional). Keyboard only: pick a color and size, add to cart. Kettlecrest — a fictional demo store with common theme defects.
- **00:02** Home page loads. First-visit newsletter popup opens after 1 second.
- **00:04** ✗ Popup moves keyboard focus into itself — focus stayed on nothing (page body)
- **00:05** Key: Tab — Is focus kept inside the popup?
- **00:05** ✗ Tab keeps focus inside the popup — focus moved behind the overlay to link "View the fixed version"
- **00:06** Key: Escape — Close the popup
- **00:07** ✗ Escape closes the popup — popup stayed open; its close "×" is a <span> that keyboard users cannot reach
- **00:08** Mouse needed: closing the popup with the mouse to continue the test
- **00:08** Key: Tab ×16 — Looking for the Ridgeline 40L Pack link. Focus now on: link "Ridgeline 40L Pack".
- **00:11** ✓ Reach the "Ridgeline 40L Pack" link with Tab
- **00:12** Key: Enter — Open the product page
- **00:12** Key: Tab ×13 — Looking for the color options. Focus now on: link "click here".
- **00:15** ✗ Choose color "Slate" with the keyboard — Tab jumped from link "128 reviews" to link "click here"; the swatches are <div>s with no role, name or tab stop
- **00:16** Key: Shift+Tab ×1 — Looking for the size options. Focus now on: link "128 reviews".
- **00:16** ✗ Choose size "L" with the keyboard — Shift+Tab jumped from link "click here" to link "128 reviews"; sizes are <div>s with no group label or tab stop
- **00:17** Key: Tab ×3 — Looking for Add to cart. Focus now on: button "Add to cart".
- **00:18** Key: Enter — Add to cart
- **00:19** ✗ Add to cart with Enter — nothing added; error shown visually only: "Please select a size"
- **00:20** Mouse needed: choosing Slate / L with the mouse to keep testing the cart drawer
- **00:20** Key: Enter — Add to cart (after mouse help)
- **00:21** ✗ Cart drawer opens and receives focus — drawer opened but focus stayed on button "Add to cart" behind it
- **00:22** ✗ The add-to-cart result is exposed to screen readers — no live region, focus change or dialog description; the cart count changes silently
- **00:23** Key: Escape — Close the cart drawer
- **00:24** ✗ Escape closes the cart drawer — drawer stayed open; its close "×" is a <span>
- **00:25** ✗ Focus returns to "Add to cart" — drawer still open, focus never moved
- **00:27** ✗ Visible focus indicator on every control used — no visible indicator on: product link, add to cart
- **00:28** BEFORE: task failed (demo store, fictional). 11 of 12 checks failed. A keyboard user can't choose a size, so can't buy. Screen reader users hear nothing when the cart updates.
## After (fixed store)

- **00:31** AFTER (demo store, fictional). Same store, same design. Same keyboard-only task. Fixes mapped to each audit finding.
- **00:33** Home page loads. First-visit newsletter popup opens after 1 second.
- **00:35** ✓ Popup moves keyboard focus into itself
- **00:36** Key: Tab — Is focus kept inside the popup?
- **00:36** ✓ Tab keeps focus inside the popup
- **00:37** Key: Escape — Close the popup
- **00:37** ✓ Escape closes the popup
- **00:38** Key: Tab ×21 — Looking for the Ridgeline 40L Pack link. Focus now on: link "Ridgeline 40L Pack".
- **00:42** ✓ Reach the "Ridgeline 40L Pack" link with Tab
- **00:42** Key: Enter — Open the product page
- **00:43** Key: Tab ×19 — Looking for the color options. Focus now on: radio "Forest" [checked].
- **00:46** Key: Right Arrow — Select the next color (Slate)
- **00:47** ✓ Choose color "Slate" with the keyboard
- **00:47** Key: Tab ×1 — Looking for the size options. Focus now on: radio "S".
- **00:48** Key: Right Arrow — Move to size M
- **00:48** Key: Right Arrow — Move to size L
- **00:49** ✓ Choose size "L" with the keyboard
- **00:49** Key: Tab ×5 — Looking for Add to cart. Focus now on: button "Add to cart".
- **00:50** Key: Enter — Add to cart
- **00:51** ✓ Add to cart with Enter
- **00:52** ✓ Cart drawer opens and receives focus
- **00:52** ✓ The add-to-cart result is exposed to screen readers
- **00:53** Key: Escape — Close the cart drawer
- **00:54** ✓ Escape closes the cart drawer
- **00:54** ✓ Focus returns to "Add to cart"
- **00:55** ✓ Visible focus indicator on every control used
- **00:56** AFTER: task passes (demo store, fictional). 12 of 12 checks pass. 0 axe-core violations. Demo store — fictional. Built to show accessibility fixes.