Skip to content

fix(a11y): add focus-visible rings to outline settings segments + twistie#209

Merged
mtskf merged 1 commit into
mainfrom
feat/a11y-focus-visible-rings
Jul 12, 2026
Merged

fix(a11y): add focus-visible rings to outline settings segments + twistie#209
mtskf merged 1 commit into
mainfrom
feat/a11y-focus-visible-rings

Conversation

@mtskf

@mtskf mtskf commented Jul 12, 2026

Copy link
Copy Markdown
Owner

Summary

  • Add :focus-visible outline rings to .quoll-settings-segment (outline settings popover radiogroup) and .quoll-outline-twistie (heading expand/collapse button), mirroring the existing ring pattern used elsewhere (.quoll-outline-item:focus-visible).
  • Previously both keyboard-focusable controls had no visible focus indicator, so arrowing between settings segments or focusing a twistie left keyboard users with no way to tell which control was focused.

Changes

  • src/webview/styles.css: add :focus-visible { outline: 1px solid var(--vscode-focusBorder); } to .quoll-outline-twistie and .quoll-settings-segment.
  • CHANGELOG.md / package.json: 0.1.44 patch bump + changelog entry.

Related

  • TODO: a11y M2+L1 — focus-visible rings for outline settings segments + twistie (from .claude/docs/a11y/2026-07-12-editor-surface-audit.md)

Test Plan

  • pnpm compile
  • pnpm build
  • pnpm test:unit (3327 passed)
  • pnpm test:browser (26 passed)
  • pnpm lint
  • Verified in the real-browser preview harness (headless Playwright) that both .quoll-outline-twistie and .quoll-settings-segment render a 1px solid --vscode-focusBorder outline on :focus-visible.

@mtskf mtskf merged commit b0c1aaf into main Jul 12, 2026
1 check passed
@mtskf mtskf deleted the feat/a11y-focus-visible-rings branch July 12, 2026 16:03
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