fix(checkbox,radio,toggle): add missing keyboard focus indicators - #31295
Open
ShaneK wants to merge 28 commits into
Open
fix(checkbox,radio,toggle): add missing keyboard focus indicators#31295ShaneK wants to merge 28 commits into
ShaneK wants to merge 28 commits into
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
brandyscarney
approved these changes
Jul 28, 2026
brandyscarney
left a comment
brandyscarney
left a comment
Member
There was a problem hiding this comment.
Great work! Thanks for adding more tests/screenshots. 🎉
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
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: