Skip to content

fix(z-input): add focus-visible indicator for links in checkbox/radio labels#664

Open
ada-workbackai wants to merge 1 commit intomasterfrom
workbackai/fix/wcag-2.4.7-checkbox-link-focus
Open

fix(z-input): add focus-visible indicator for links in checkbox/radio labels#664
ada-workbackai wants to merge 1 commit intomasterfrom
workbackai/fix/wcag-2.4.7-checkbox-link-focus

Conversation

@ada-workbackai
Copy link
Copy Markdown
Contributor

Summary

Fixes WCAG 2.4.7 (Focus Visible) by adding visible focus indicators to links rendered inside checkbox and radio button labels in the z-input component.

Issue: Links embedded in checkbox labels (e.g., "Linee di condotta" in registration consent forms) had no visible focus indicator when navigated via keyboard, leaving keyboard users unable to determine their current focus position.

Solution: Added :focus-visible styles for <a> elements inside .checkbox-label and .radio-label, using the design system's existing --shadow-focus-primary box-shadow pattern (consistent with z-link focus styles) plus underline text decoration.

Technical Changes

Added to src/components/z-input/styles-checkbox-radio.css:

/* focus on links inside labels */
.radio-wrapper .radio-label a:focus-visible,
.checkbox-wrapper .checkbox-label a:focus-visible {
  box-shadow: var(--shadow-focus-primary);
  outline: none;
  text-decoration: underline;
}

Test Plan

  • Focus indicator appears on links inside checkbox labels when navigating with Tab key
  • Focus style uses the design system's standard --shadow-focus-primary pattern
  • No focus indicator appears on mouse click (:focus-visible only triggers for keyboard)
  • Stylelint passes
  • Prettier formatting passes

Evidence

View before/after screenshots and full audit details:
https://app.workback.ai/issues/9x6s6n2wbona9iqwds3kioixrg/


WCAG Reference:
2.4.7 Focus Visible

…adio labels

Links rendered via innerHTML in checkbox/radio labels had no visible focus indicator,
preventing keyboard users from knowing when they had focused interactive elements
like "Linee di condotta" in consent forms. Adds box-shadow and underline on
:focus-visible, consistent with the design system's z-link focus pattern.
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