fix(checkbox,radio,toggle): add missing keyboard focus indicators - #31295
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
brandyscarney
requested changes
Jul 24, 2026
brandyscarney
left a comment
brandyscarney
left a comment
Member
There was a problem hiding this comment.
Looks good! My main feedback is we should be hiding the browser's native focus ring.
brandyscarney
requested changes
Jul 27, 2026
brandyscarney
left a comment
brandyscarney
left a comment
Member
There was a problem hiding this comment.
The code itself looks great! My requests are just for additional screenshots & some test changes.
…demo grid clipping
thetaPC
requested changes
Jul 28, 2026
# Conflicts: # core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png # core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png # core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png # core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
brandyscarney
approved these changes
Jul 31, 2026
brandyscarney
left a comment
brandyscarney
left a comment
Member
There was a problem hiding this comment.
Looks good! Mostly some questions on the expected behavior.
thetaPC
reviewed
Jul 31, 2026
thetaPC
left a comment
thetaPC
left a comment
Contributor
There was a problem hiding this comment.
Waiting on your responses to Brandy to determine my decision.
ShaneK
added a commit
that referenced
this pull request
Aug 5, 2026
…ents The keyboard focus indicator is drawn 7px outside the control, so it widened the hit area and swallowed clicks aimed just past the control. A checkbox clicked below itself kept focus instead of blurring, so the next click emitted no ionFocus. This only surfaced on next: main starts the focus-visible utility in ion-app, so a setContent test without one never got ion-focused and never drew the ring. next initializes it globally (#31165), so the ring main added in #31295 now renders in those tests too. The indicator is decorative and must never take pointer events. The ios toggle uses box-shadow, which cannot capture them, so it needs no change.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: internal
What is the current behavior?
Currently,
ion-checkboxandion-togglenever show a keyboard focus indicator.ion-checkboxdoesn't set theion-focusableclass and has no focus styles in theiosormdthemes, so it can't receive theion-focusedclass or render a ring.ion-toggle's only focus rule (:host(.ion-focused) input) targets the nativeinput, which isdisplay: none, so it never renders.Separately,
ion-checkbox,ion-radio, andion-toggleshow no focus indicator inside anion-itemthat holds more than one input.ion-checkboxandion-radiodisable their own indicator in an item on the assumption the item draws one, but a multi-input item has no cover to highlight, so nothing is focused.What is the new behavior?
ion-checkboxnow setsion-focusablewhen it isn't deferring to an item, with matchingiosandmdfocus styles, so a standalone checkbox shows the same indicatorion-radioalready did. Bothion-checkboxandion-radioalso become focusable inside a multi-input item, detected through the item'sitem-multiple-inputsclass, so each control shows its own indicator when the item can't.ion-togglealways shows its own indicator. Unlike checkbox and radio, it's excluded from the item's input cover, so an item never highlights on its behalf, in or out of a multi-input item. Its deadinputfocus rule is replaced with a ring on the visible track in both themes.Does this introduce a breaking change?
Other information
Preview checkbox:
Preview toggle:
Preview radio: