Skip to content

fix: checkbox/radio/switch target size, check tag remove target #3363

Open

Description

@coraliefeil

Title: A11y: Checkbox/Switch/Radio label row and Tag remove target below WCAG 2.2 target size minimum (2.5.8)

Current behavior

  • Checkbox label row: 109×21px (control itself 16×16px) – below the 24×24px minimum.
  • Switch: 113×24px – right at the edge, no margin for measurement variance.
  • Radio: likely the same pattern as Checkbox (needs confirming).
  • Tag remove icon: not implemented as a real <button> – hit target unverified.

Expected behavior

WCAG 2.2 AA – 2.5.8 Target Size (Minimum) ⚠️ gap

→ To-do:

  • Increase label row height/padding to 24px minimum for Checkbox, Switch, Radio
  • Confirm Radio follows the same pattern as Checkbox
  • Verify Tag's remove icon has a real interactive element (button) with a ≥24×24px hit target

Steps to reproduce

  1. Open Storybook, inspect the label row of sd-checkbox / sd-switch / sd-radio in DevTools
  2. Measure the clickable/tappable area (not just the visible control)
  3. Compare against 24×24px CSS pixels

Storybook

Technical Information

DoR

  • Item has business value
  • Item has been estimated by the team
  • Item is clear and well-defined
  • Item dependencies have been identified

Activity

  1. self-assigned this
    on Sep 25, 2026
  2. added
    A11yIdentifies tasks related to accessibility improvements identified in the A11y audit of the DS
    on Sep 25, 2026
  3. added theissue type on Sep 25, 2026
  4. removed their assignment
    on Sep 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    A11yIdentifies tasks related to accessibility improvements identified in the A11y audit of the DSDevelopmentneeds changes in code

    Type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions