A11y | Add a designed focus ring on blanks and toolbar tools

[BrianGenisio]

Summary

Closes #57. FIB blanks and toolbar tools use the same two-tone keyboard ring as Matching and MCQ, so the indicator is not UA-outline-only. Matching still uses :focus on purpose.

Also records A13 as closed (PR #65) on the issue map. That number is not on the A20 row.

Changes

.blank:focus-visible and .global-toolbar-tool:focus-visible get the Neutral-1450 / Neutral-00 stacked ring and a transparent outline for forced-colors. These controls are not scripted-focus widgets, so :focus-visible is the right trigger.

Test plan

• npm test — A20 characterization
• fib-simple.md: both rules are in the live CSSOM with the two-tone tokens; Matching :focus unchanged
• Keyboard Tab in light and dark: ring on a blank and on Clear All
• Host iframe (needs-manual-verify)

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Essentials

Run ID: 192e6013-cf7a-40dc-b601-f58018444cf8

📥 Commits

Reviewing files that changed from the base of the PR and between 5261d85 and e1e743d.

📒 Files selected for processing (4)

• a11y-audits/8-13-26/wave-4-plan.md
• public/components/toolbar.css
• public/modules/fib.css
• test/a11y-characterization.test.js

---

📝 Walkthrough

Walkthrough

Added :focus-visible rings for FIB blanks and global toolbar tools using transparent outlines and neutral two-tone box shadows. Added an A20 characterization test for the focus-visible rules and confirmed that Matching continues to use :focus. Updated the Wave 4 plan to record A13 as completed in PR #65, set A20 as the current target, and identify Wave 4b A12 as the next step.

---

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