Every engineer who has shipped a settings page has shipped this component. Ten lines of JSX. A useState<number> for the active index, a click handler, a conditional render of the active body. The reviewer opens it in Chrome on a 1080p monitor, clicks each label in turn, the body content swaps, the reviewer nods. Merge. Ship it on Friday.
A week later the bug queue fills. A power user on a keyboard reports they “literally cannot reach the tab labels” — Tab walks straight past every label and drops them in the footer. A user on NVDA reports the settings page “just has walls of clickable things with no labels.” A third ticket: on every page reload, for two frames, every panel body is visible stacked on top of each other before one of them snaps to active. Three user groups. One broken helper. The same ten lines.
Live market wrap. Breaking headlines from the wire services.
The TV above is running the naive version — a <div onClick> on every channel label, a useState<string> tracking which channel is active. Click a label; the body appears. Click another; it swaps. Mouse works. The code-review probe is “does it click?” — and it does.
// The 10-line version every junior ships first.// Works in code review. Fails silently for four user groups:// - Keyboard: Tab skips every label (<div> is not focusable)// - Screen reader: NVDA says "clickable, clickable" — no role,// no selected state, no tab↔panel connection// - SSR: panels flash stacked on hydration for 1-2 frames// - Animation: hard-cut panel swap, no sliding indicatorfunction BrokenTabs({ tabs }) { const [active, setActive] = useState(0); return ( <div> <div className="flex gap-2"> {tabs.map((t, i) => ( <div key={i} onClick={() => setActive(i)} className={i === active ? 'active' : ''}> {t.label} </div> ))} </div> <div>{tabs[active].body}</div> </div> );}Now run the probes the code reviewer didn't. Each question below imagines ONE user group trying to use what you just built. Predict the outcome before each reveal — the probe answers are how the felt wall lands.
Four users, four probes. A mouse user. A keyboard-only power user. A screen-reader user on NVDA. A user on a slow 3G connection watching the page paint. Which of the four does the 10-line naive version actually serve?
Four users each run ONE probe against the naive <div onClick> tabs. Which probes PASS?