A11y | Use an offset focus outline on MCQ options

[BrianGenisio]

Summary

Fixes CodeSignal/learn#4490. MCQ radio and checkbox options now draw a 2px keyboard focus outline, held 2px off the card, in --Colors-Input-Focus-Visible. Offsetting it against the page is what lets one color cover unchecked, checked, and hover.

The native inputs were 0×0, so Chromium skipped them when tabbing. They now fill the option (still invisible) so Tab and arrows can land on them.

Changes

.mcq-option:has(input:focus-visible) is the composite-control companion to the design-system radio/checkbox ring: position: relative, 2px solid, 2px offset, no z-index. We ring the whole card because the 26px mark sits on the card fill; an offset there would contrast against the card, not the page.

The two-tone box-shadow ring is gone. Mouse clicks stay on :focus-visible and do not draw the outline. Hover and checked borders are unchanged.

Test plan

• npm test — characterization locks the 2px offset outline, no box-shadow, and the stretched input
• /play with mcq.md: Tab to a radio and confirm a 2px primary outline 2px off the card in light and dark
• Arrow keys move the ring with the selection; a mouse click selects without the outline
• /play with mcq-multi-answer.md: same ring on checkboxes

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Essentials

Run ID: 84780db0-5a7b-4ac1-ab3d-841e4c059b9f

📥 Commits

Reviewing files that changed from the base of the PR and between 3c0f74b and 81af949.

📒 Files selected for processing (2)

• public/modules/mcq.css
• test/a11y-characterization.test.js

Included review availability: 4 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

---

📝 Walkthrough

Walkthrough

MCQ checkbox and radio inputs now span the full option card while remaining visually hidden. The native input outline is removed. Focused options now use a 2px solid --Colors-Input-Focus-Visible outline with a 2px offset and no box shadow. An accessibility characterization test verifies these declarations.

Priority: ➖ Normal

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 81af9

No actionable merge-blocking issue was identified.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The change addresses #4490. public/modules/mcq.css now applies a 2px var(--Colors-Input-Focus-Visible) outline with a 2px offset to the complete MCQ option on :focus-visible. The outline replace…
Out of Scope Changes check	✅ Passed	The pull request changes only MCQ option focus styling, native input hit-area and focus behavior, and a characterization test for those changes. These changes support the accessibility objective in #4…
Description check	✅ Passed	The description clearly explains the MCQ accessibility changes, focus outline behavior, input sizing, and test plan.
Title check	✅ Passed	The title clearly identifies the accessibility change and the offset focus outline for MCQ options.

---

_{Comment @coderabbitai help to get the list of available commands.}