Skip to content

fix: add consistent visible focus for interactive components (a11y) - backport v19#8381

Open
Wagner3UB wants to merge 3 commits into
18.x.xfrom
universal-focus-visible-a11y-v18
Open

fix: add consistent visible focus for interactive components (a11y) - backport v19#8381
Wagner3UB wants to merge 3 commits into
18.x.xfrom
universal-focus-visible-a11y-v18

Conversation

@Wagner3UB

Copy link
Copy Markdown
Contributor

Backport of #7850 to the 18.x.x branch.

Centralizes focus-state management to ensure visual consistency and resolve accessibility (a11y) issues with missing visible focus on interactive components. Focus indicators appear only during keyboard navigation via :focus-visible.

Changes

  • extras/focus.less (new): adds the .universal-focus-style() mixin (single source of truth for focus indicators) and global :focus-visible rules — applied to interactive elements, inputs, Semantic UI checkboxes and skiplinks. Contenteditable/slate editors are excluded (text cursor already implies focus).
  • extras/main.less: imports focus.less.
  • extras/skiplinks.less: removes the local border/outline on :focus (now centralized).
  • globals/site.variables: adds @innerFocusShadow (#fff) and @outerFocusOutline (#000) for the dual-ring high-contrast strategy.

Notes for review

  • Skiplinks selector adapted to the v18 markup: .skiplinks-wrapper a:focus-visible (v19 PR used .skiplinks a, which does not match the DOM).
  • Outline uses 2px solid instead of the v19 PR's auto, for a crisp, consistent width across browsers.

@Wagner3UB Wagner3UB self-assigned this Jul 13, 2026

@stevepiercy stevepiercy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One question. Otherwise LGTM. Thank you!

Comment thread packages/volto/theme/themes/pastanaga/extras/focus.less
@Wagner3UB
Wagner3UB requested a review from stevepiercy July 14, 2026 09:39
@github-project-automation github-project-automation Bot moved this from In progress to Reviewer approved in Accessibility Jul 14, 2026
@github-project-automation github-project-automation Bot moved this from In progress to Reviewer approved in RedTurtle priorities Jul 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Reviewer approved
Status: Reviewer approved

Development

Successfully merging this pull request may close these issues.

2 participants