Skip to content

Fix Switch keyboard activation, focus ring, and thumb geometry - #5825

Draft
burieberry wants to merge 1 commit into
mainfrom
cs-12328-boxel-ui-switch-geometry-focus-sizing-api-fixes-shared-pill
Draft

Fix Switch keyboard activation, focus ring, and thumb geometry#5825
burieberry wants to merge 1 commit into
mainfrom
cs-12328-boxel-ui-switch-geometry-focus-sizing-api-fixes-shared-pill

Conversation

@burieberry

@burieberry burieberry commented Aug 19, 2026

Copy link
Copy Markdown
Contributor

Fixes the boxel-ui Switch per CS-12328:

  • Single change binding replaces the click + keypress pair, which double-fired on Space and made the switch keyboard-inoperable; Enter (inert on checkboxes) gets its own keydown path
  • The Switch owns a :focus-visible ring on the label; the UA halo on the inner input is suppressed
  • Thumb travel is translateX(width − height) instead of margin-left: 49% — flush right at any size/border/padding, animated via transform
  • onChange passes the new state (() => void callers stay assignable); aria-checked renders as explicit 'true'/'false' instead of vanishing when false
  • Adds a shared --boxel-border-radius-pill token; the track uses it
  • Template-only component; SwitchSiganture typo fixed

Verified through the homepage mode toggle: Space, Enter, and click each toggle exactly once; ring draws on the control; thumb lands flush at both ends. The boxel-home consumer workarounds are removed in a follow-up there, which should land after this deploys.

🤖 Generated with Claude Code

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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