fix: give the blueprint form items a visible keyboard focus indicator

[lightbulbman]

Summary

Follow-up to #530, which merged before this commit was pushed. The review thread on that PR was answered and resolved on the basis of this change, but the merge did not include it, so the issue it describes is still present on core-beta.

The blueprint form's list items removed the browser focus indicator with outline: none and relied on the background change alone to show focus. The unfocused fill #f6f7f7 and the focused fill #c9e1f5 differ by 1.26:1, well under the 3:1 minimum for a focus indicator, so keyboard focus was effectively invisible. outline: none also applied to :hover, where it did nothing.

Hover and focus are now separated: hover keeps the fill and text colour, and :focus-visible additionally draws a 2px outline in --cs-color-accent-hover. That colour measures 6.80:1 against the focused fill and 8.54:1 against the surrounding list, both clearing the 3:1 minimum. outline-offset: -2px draws it inside the item, which sits flush against its neighbours.

Verification

• npm run build — compiles successfully
• npm run lint:styles — clean
• Contrast ratios computed against the WCAG relative luminance formula

Summary by CodeRabbit

• Style
  • Improved keyboard focus visibility for sidebar items with a clear inset accent outline.
  • Preserved existing hover and focus-visible styling.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Team

Run ID: 31914f3d-71db-402b-9315-1c2e57e5d1e8

📥 Commits

Reviewing files that changed from the base of the PR and between 0ac434b and 1cf922a.

📒 Files selected for processing (1)

• src/css/manage/blueprints/_form-layout.scss

Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.

---

Walkthrough

The sidebar item focus state now displays a 2px inset accent outline while preserving existing hover and focus-visible styling.

Changes

Sidebar focus styling

Layer / File(s)	Summary
Preserve sidebar focus visibility src/css/manage/blueprints/_form-layout.scss	Sidebar items use a 2px inset accent outline instead of outline: none.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to 1cf92

Blueprint sidebar form items now show a visible keyboard focus outline while retaining existing hover styling. No merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Pr Hygiene	⚠️ Warning	The title is a short conventional-commit summary. The description is present and includes factual change details. The PR description also includes narrative review and merge history, which is not a fa…	Replace the narrative review and merge history with a concise factual change summary. Remove the AI-attribution block from the PR description. Keep the title and verification details.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title uses the conventional fix: prefix, describes the visible keyboard focus indicator change, and is 69 characters long.
Correctness And Security	✅ Passed	PASS. The change in src/css/manage/blueprints/_form-layout.scss:51-65 removes outline: none from the sidebar item hover rule and adds a :focus-visible outline. The selector targets the existing …
Ponytail: No Over-Engineering	✅ Passed	PASS. The change adds a direct :focus-visible rule at src/css/manage/blueprints/_form-layout.scss:63-66. It removes outline: none from the shared hover and focus rule at lines 51-58. The change …
Scope Discipline	✅ Passed	The PR has one changed file, src/css/manage/blueprints/_form-layout.scss. The patch only separates hover styling from :focus-visible styling and adds the focus outline for blueprint sidebar items.…

Full details: Pr Hygiene

Explanation

The title is a short conventional-commit summary. The description is present and includes factual change details. The PR description also includes narrative review and merge history, which is not a factual change summary. It includes an AI-attribution block after the Verification section. No private or cross-repo disclosure was identified.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/blueprint-focus-indicator/core

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch fix/blueprint-focus-indicator/core

---

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