QABattle

Accessibility / Scenario

The SPA That Lost Focus

Client-side routes change content but never move focus. A screen-reader user never learns the page changed. Fix it.

Difficulty
Hard
Format
Scenario
Points
200
Estimate
15 min

// MISSION BRIEF

Your Mission

A single-page app swaps content on navigation but does nothing with focus. The screen reader keeps reading the old view; the keyboard user is thrown back to the top; the dialog opens behind the trigger. The automated scanner sees none of it.

Read the behavior notes and the code, name each failure, and specify the focus management an accessible SPA owes its users.

// FIRST CONTACT

Battle teaser

First artifact

SPA navigation and dialog (simplified)

Which real failures are present? (Select all that apply.)

  1. AOpening the dialog does not move focus into it
  2. BFocus resets to <body> after navigation, so the keyboard user must re-tab from the top
  3. CThe scanner reports clean because focus behavior is not statically checkable
  4. DRoute change does not move focus or announce the new view (SR user unaware)
Answers, scoring, hints, and the full battle stay sealed.

// SKILL TAGS

accessibilityspafocusscreen-reader