fix(checkbox,radio,toggle): add missing keyboard focus indicators - #31295
Open
ShaneK wants to merge 17 commits into
Open
fix(checkbox,radio,toggle): add missing keyboard focus indicators#31295ShaneK wants to merge 17 commits into
ShaneK wants to merge 17 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
Comment on lines
+290
to
+293
| /** | ||
| * The focus indicator UI differs between iOS and MD, so these visual tests run | ||
| * in both modes. Direction does not affect the indicator, so only LTR is run. | ||
| */ |
Contributor
There was a problem hiding this comment.
Just a nit for consistency
Suggested change
| /** | |
| * The focus indicator UI differs between iOS and MD, so these visual tests run | |
| * in both modes. Direction does not affect the indicator, so only LTR is run. | |
| */ | |
| /** | |
| * This behavior does not vary across directions | |
| */ |
Comment on lines
+149
to
+152
| /** | ||
| * The focus indicator UI differs between iOS and MD, so these visual tests run | ||
| * in both modes. Direction does not affect the indicator, so only LTR is run. | ||
| */ |
Contributor
There was a problem hiding this comment.
Suggested change
| /** | |
| * The focus indicator UI differs between iOS and MD, so these visual tests run | |
| * in both modes. Direction does not affect the indicator, so only LTR is run. | |
| */ | |
| /** | |
| * This behavior does not vary across directions | |
| */ |
| // iOS Checkbox: Keyboard Focus | ||
| // ----------------------------------------- | ||
|
|
||
| :host(.ion-focused) .native-wrapper::after { |
Contributor
There was a problem hiding this comment.
All but one line of this is the same for md. Please move those over to checkbox.scss. By combining it now, it makes it easier for the Modular Ionic work.
| // Material Design Checkbox: Keyboard Focus | ||
| // ----------------------------------------- | ||
|
|
||
| :host(.ion-focused) .native-wrapper::after { |
Contributor
There was a problem hiding this comment.
| $checkbox-ios-icon-checkmark-width: 1.5px; | ||
|
|
||
| /// @prop - Background color of focus indicator for checkbox when focused | ||
| $checkbox-ios-background-color-focused: ion-color(primary, tint); |
Contributor
There was a problem hiding this comment.
Since this is the same as md, let's move it to checkbox.vars.scss. By combining it now, it makes it easier for the Modular Ionic work.
| $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1); | ||
|
|
||
| /// @prop - Background color of focus indicator for checkbox when focused | ||
| $checkbox-md-background-color-focused: ion-color(primary, tint); |
Contributor
There was a problem hiding this comment.
Comment on lines
+4
to
+7
| /** | ||
| * The focus indicator UI differs between iOS and MD, so these visual tests run | ||
| * in both modes. Direction does not affect the indicator, so only LTR is run. | ||
| */ |
Contributor
There was a problem hiding this comment.
Suggested change
| /** | |
| * The focus indicator UI differs between iOS and MD, so these visual tests run | |
| * in both modes. Direction does not affect the indicator, so only LTR is run. | |
| */ | |
| /** | |
| * This behavior does not vary across directions | |
| */ |
Comment on lines
+103
to
+106
| /** | ||
| * The focus indicator UI differs between iOS and MD, so these visual tests run | ||
| * in both modes. Direction does not affect the indicator, so only LTR is run. | ||
| */ |
Contributor
There was a problem hiding this comment.
Suggested change
| /** | |
| * The focus indicator UI differs between iOS and MD, so these visual tests run | |
| * in both modes. Direction does not affect the indicator, so only LTR is run. | |
| */ | |
| /** | |
| * This behavior does not vary across directions | |
| */ |
| // The item toggles `item-multiple-inputs` after this control renders and as | ||
| // inputs are added or removed. Re-render when it flips so the focus | ||
| // indicator stays in sync. | ||
| const item = this.el.closest('ion-item'); |
Contributor
There was a problem hiding this comment.
Since this logic is the same as checkbox, is it possible to create a util?
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: