a11y: redirect focus ring from checkbox to full chip

[ashishbhateja]

What this changes

Adds two CSS rules to src/reader/reader.css so that when a keyboard user focuses an interest chip, the 3 px focus outline appears around the entire chip label rather than only around the tiny browser-default checkbox inside it.

/* Redirect the focus ring from the tiny checkbox to the whole chip. */
.chip:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.chip input:focus-visible {
  outline: none;
}

The chip already uses :has(input:checked) to style the full label on selection; this extends that same pattern to :focus-visible.

Why

Closes #5 (partial). The interest chips are the main interactive element on the reader for personalising recommendations. With only the checkbox receiving the focus ring, keyboard-only users had to hunt for a small, easily missed indicator — especially in the dark or high-contrast themes where the default browser checkbox outline can blend into the background. The fix makes the focus state as prominent as the selected state.

Checklist

• node scripts/smoke.mjs passes (19 checks)
• No new runtime dependencies
• For UI changes: keyboard, focus, and semantics considered
• No magazine content committed (developed against the sample edition)

---

Generated by Claude Code