Every engineer who has shipped a marketing page has shipped this component. Eight lines of JSX. A useState for the open drawer. A click handler. A conditional render for the body. The reviewer opens it in Chrome, clicks a drawer, the answer slides out, the reviewer nods. Merge. Ship.

A week later the bug queue fills. A keyboard-only power user reports they can't reach the FAQ at all — Tab walks past every drawer and lands in the footer. A user on NVDA reports the page “just has a wall of blank boxes.” A user on a slow 3G connection reports a “flash of content” on every reload — for three frames every drawer is open, then they all slam closed. Three user groups. One broken helper. The same eight lines.

The cabinet above is running the naive version — a <div onClick> on every drawer header, a useState<string | null> tracking which drawer is open. Click a drawer; the body appears. Click again or click another; it swaps. Mouse works. The ship reviewer's only probe is “does it click?” and it does.

// Eight lines. Passes the code review. Ships on Friday.

function FAQ({ items }: { items: { title: string; body: string }[] }) {

  const [open, setOpen] = useState<number | null>(null);

  return (

    <div className="accordion">

      {items.map((item, i) => (

        <div key={i} className="item">

          <div onClick={() => setOpen(open === i ? null : i)}>

            {item.title}

          </div>

          {open === i && <div>{item.body}</div>}

        </div>

      ))}

    </div>

  );

}

Now run the probes the reviewer didn't. The next three questions each imagine 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.