Skip to content

fix(web): restore visible sidebar keyboard focus - #36

Closed
thomasorgeval wants to merge 1 commit into
mainfrom
palette/restore-sidebar-focus-rings
Closed

thomasorgeval wants to merge 1 commit into
mainfrom
palette/restore-sidebar-focus-rings

Conversation

@thomasorgeval

Copy link
Copy Markdown
Member

Summary

  • Restore visible keyboard focus on sidebar navigation and external icon links by removing component-level outline: none overrides.
  • Use explicit 2px lavender focus-visible outlines via Tailwind utilities. Navigation outlines sit inside the links to avoid clipping in the mobile horizontal scroller; icon outlines sit outside their links.
  • Add three template/CSS regression tests covering navigation focus utilities, icon-link focus utilities, and the absence of component outline overrides. Preserve existing active-page semantics, layout, and hover styling.

Expected impact

Keyboard users can identify the focused sidebar link, including the current page and the previously visually unchanged icon links. No backend, workflow, or authentication changes.

Verification

  • Initial worktree was clean and HEAD matched the required commit.
  • Open PRs fix(reply-inbox): announce action feedback to screen readers #33 and refactor(web): derive analysis options from contract enums #35 and open issues inspected before selecting work; open PRs rechecked before committing. No overlapping changed files or ready-for-agent issues.
  • Required runtime: Node v26.9.0, pnpm 12.5.1. pnpm install --frozen-lockfile passed.
  • pnpm nx run-many -t test,typecheck,lint,build -p web --outputStyle=static passed: 5 test files / 15 tests, lint, typecheck, and production build. The final run reused the successful production build from the earlier run.
  • Oxfmt checks for all three changed files and git diff --check passed.
  • Parsed the generated production stylesheet with PostCSS and asserted that all four focus utilities emit the intended outline width, inward/outward offsets, and brand color.
  • Browser keyboard behavior and assistive-technology output were not manually tested; regression tests cover template/CSS structure, not browser focus rendering.

@thomasorgeval
thomasorgeval deleted the palette/restore-sidebar-focus-rings branch October 14, 2026 09:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant