diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss
index 7c7bcafc9fd..6e8a512936c 100644
--- a/core/src/components/checkbox/checkbox.ios.scss
+++ b/core/src/components/checkbox/checkbox.ios.scss
@@ -31,3 +31,26 @@
:host(.checkbox-disabled) {
opacity: $checkbox-ios-disabled-opacity;
}
+
+// iOS Checkbox: Keyboard Focus
+// -----------------------------------------
+
+:host(.ion-focused) .native-wrapper::after {
+ @include border-radius(50%);
+
+ display: block;
+ position: absolute;
+
+ width: 36px;
+ height: 36px;
+
+ transform: translate(-50%, -50%);
+
+ background: $checkbox-ios-background-color-focused;
+
+ content: "";
+ opacity: 0.2;
+
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
+}
diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss
index 78605a85f88..c41efe339a7 100644
--- a/core/src/components/checkbox/checkbox.ios.vars.scss
+++ b/core/src/components/checkbox/checkbox.ios.vars.scss
@@ -28,3 +28,6 @@ $checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity;
/// @prop - Checkmark width of the checkbox icon
$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);
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
index e87f7bbf1a0..6f22e61204d 100644
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -51,3 +51,26 @@
:host(.checkbox-disabled) .native-wrapper {
opacity: $checkbox-md-icon-disabled-opacity;
}
+
+// Material Design Checkbox: Keyboard Focus
+// -----------------------------------------
+
+:host(.ion-focused) .native-wrapper::after {
+ @include border-radius(50%);
+
+ display: block;
+ position: absolute;
+
+ width: 36px;
+ height: 36px;
+
+ transform: translate(-50%, -50%);
+
+ background: $checkbox-md-background-color-focused;
+
+ content: "";
+ opacity: 0.2;
+
+ inset-block-start: 50%;
+ inset-inline-start: 50%;
+}
diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss
index 445d50b6a6e..0b9e5600a14 100644
--- a/core/src/components/checkbox/checkbox.md.vars.scss
+++ b/core/src/components/checkbox/checkbox.md.vars.scss
@@ -30,6 +30,9 @@ $checkbox-md-transition-duration: 180ms;
/// @prop - Transition easing of the checkbox
$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);
+
/// @prop - Opacity of the disabled checkbox
/// This value is used because the checkbox color is set to
/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 438add273d0..bd2c0df4117 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -122,6 +122,8 @@ input {
.native-wrapper {
display: flex;
+ position: relative;
+
align-items: center;
}
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 99cb13c474a..c0b56da4ffb 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,5 +1,5 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
+import { Build, Component, Element, Event, Host, Method, Prop, State, forceUpdate, h } from '@stencil/core';
import { checkInvalidState } from '@utils/forms';
import type { Attributes } from '@utils/helpers';
import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
@@ -37,6 +37,7 @@ export class Checkbox implements ComponentInterface {
private errorTextId = `${this.inputId}-error-text`;
private inheritedAttributes: Attributes = {};
private validationObserver?: MutationObserver;
+ private itemFocusObserver?: MutationObserver;
@Element() el!: HTMLIonCheckboxElement;
@@ -199,6 +200,22 @@ export class Checkbox implements ComponentInterface {
// Always set initial state
this.isInvalid = checkInvalidState(el);
this.hasLabelContent = this.el.textContent !== '';
+
+ // 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 = el.closest('ion-item');
+ if (item && Build.isBrowser && typeof MutationObserver !== 'undefined') {
+ let wasMultipleInputs = item.classList.contains('item-multiple-inputs');
+ this.itemFocusObserver = new MutationObserver(() => {
+ const isMultipleInputs = item.classList.contains('item-multiple-inputs');
+ if (isMultipleInputs !== wasMultipleInputs) {
+ wasMultipleInputs = isMultipleInputs;
+ forceUpdate(this);
+ }
+ });
+ this.itemFocusObserver.observe(item, { attributes: true, attributeFilter: ['class'] });
+ }
}
componentWillLoad() {
@@ -210,11 +227,15 @@ export class Checkbox implements ComponentInterface {
}
disconnectedCallback() {
- // Clean up validation observer to prevent memory leaks.
+ // Clean up observers to prevent memory leaks.
if (this.validationObserver) {
this.validationObserver.disconnect();
this.validationObserver = undefined;
}
+ if (this.itemFocusObserver) {
+ this.itemFocusObserver.disconnect();
+ this.itemFocusObserver = undefined;
+ }
}
/** @internal */
@@ -338,6 +359,8 @@ export class Checkbox implements ComponentInterface {
} = this;
const mode = getIonMode(this);
const path = getSVGPath(mode, indeterminate);
+ const inItem = hostContext('ion-item', el);
+ const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
renderHiddenInput(true, el, name, checked ? value : '', disabled);
@@ -360,11 +383,15 @@ export class Checkbox implements ComponentInterface {
onClick={this.onClick}
class={createColorClasses(color, {
[mode]: true,
- 'in-item': hostContext('ion-item', el),
+ 'in-item': inItem,
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'checkbox-indeterminate': indeterminate,
interactive: true,
+ // Focus styling should not apply when the checkbox is in an item,
+ // since the item handles the focus indicator instead. The exception
+ // is a multi-input item, which has no single indicator of its own.
+ 'ion-focusable': !inItem || inMultipleInputsItem,
[`checkbox-justify-${justify}`]: justify !== undefined,
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
[`checkbox-label-placement-${labelPlacement}`]: true,
diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
index 6d0b6645ae5..e1e63f65ef3 100644
--- a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
@@ -25,6 +25,70 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
});
});
+/**
+ * These tests assert the `ion-focusable` gating class the component controls,
+ * not the rendered focus ring. `ion-focused` is not asserted directly because
+ * it depends on keyboard-mode detection, which is unreliable on WebKit. The
+ * gating logic does not vary across modes.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+ test.describe(title('checkbox: focus indicator'), () => {
+ test('standalone checkbox should be focusable', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Checkbox
+
+ `,
+ config
+ );
+
+ const checkbox = page.locator('ion-checkbox');
+ await expect(checkbox).toHaveClass(/ion-focusable/);
+ });
+
+ test('checkbox in a single-input item should not show its own focus indicator', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Checkbox
+
+
+ `,
+ config
+ );
+
+ // The item owns the focus indicator for single-input items, so the
+ // checkbox must not become focusable itself.
+ const checkbox = page.locator('ion-checkbox');
+ const item = page.locator('ion-item');
+ await expect(checkbox).not.toHaveClass(/ion-focusable/);
+ await expect(item).toHaveClass(/ion-focusable/);
+ });
+
+ test('checkbox in a multi-input item should be focusable', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Checkbox 1
+ Checkbox 2
+
+
+ `,
+ config
+ );
+
+ // Multi-input items do not draw a single focus indicator, so each control
+ // must be able to show its own.
+ const checkboxes = page.locator('ion-checkbox');
+ await expect(checkboxes.nth(0)).toHaveClass(/ion-focusable/);
+ await expect(checkboxes.nth(1)).toHaveClass(/ion-focusable/);
+ });
+ });
+});
+
configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
test.describe(title('checkbox: a11y'), () => {
test.describe(title('checkbox: font scaling'), () => {
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index bb343c8c858..d4476dfdb51 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,5 +1,5 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import { isOptionSelected } from '@utils/forms';
import { addEventListener, removeEventListener } from '@utils/helpers';
import { createColorClasses, hostContext } from '@utils/theme';
@@ -27,6 +27,7 @@ import type { Color } from '../../interface';
export class Radio implements ComponentInterface {
private inputId = `ion-rb-${radioButtonIds++}`;
private radioGroup: HTMLIonRadioGroupElement | null = null;
+ private itemFocusObserver?: MutationObserver;
@Element() el!: HTMLIonRadioElement;
@@ -150,6 +151,22 @@ export class Radio implements ComponentInterface {
this.updateState();
addEventListener(radioGroup, 'ionValueChange', this.updateState);
}
+
+ // 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');
+ if (item && Build.isBrowser && typeof MutationObserver !== 'undefined') {
+ let wasMultipleInputs = item.classList.contains('item-multiple-inputs');
+ this.itemFocusObserver = new MutationObserver(() => {
+ const isMultipleInputs = item.classList.contains('item-multiple-inputs');
+ if (isMultipleInputs !== wasMultipleInputs) {
+ wasMultipleInputs = isMultipleInputs;
+ forceUpdate(this);
+ }
+ });
+ this.itemFocusObserver.observe(item, { attributes: true, attributeFilter: ['class'] });
+ }
}
disconnectedCallback() {
@@ -158,6 +175,10 @@ export class Radio implements ComponentInterface {
removeEventListener(radioGroup, 'ionValueChange', this.updateState);
this.radioGroup = null;
}
+ if (this.itemFocusObserver) {
+ this.itemFocusObserver.disconnect();
+ this.itemFocusObserver = undefined;
+ }
}
private updateState = () => {
@@ -216,6 +237,7 @@ export class Radio implements ComponentInterface {
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
const mode = getIonMode(this);
const inItem = hostContext('ion-item', el);
+ const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
return (
{
+ test.describe(title('radio: focus indicator'), () => {
+ test('standalone radio should be focusable', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Radio
+
+
+ `,
+ config
+ );
+
+ const radio = page.locator('ion-radio');
+ await expect(radio).toHaveClass(/ion-focusable/);
+ });
+
+ test('radio in a single-input item should not show its own focus indicator', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ Radio
+
+
+
+ `,
+ config
+ );
+
+ // The item owns the focus indicator for single-input items, so the radio
+ // must not become focusable itself.
+ const radio = page.locator('ion-radio');
+ const item = page.locator('ion-item');
+ await expect(radio).not.toHaveClass(/ion-focusable/);
+ await expect(item).toHaveClass(/ion-focusable/);
+ });
+
+ test('radio in a multi-input item should be focusable', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ Radio 1
+
+
+ Radio 2
+
+
+
+ `,
+ config
+ );
+
+ // Multi-input items do not draw a single focus indicator, so each control
+ // must be able to show its own.
+ const radios = page.locator('ion-radio');
+ await expect(radios.nth(0)).toHaveClass(/ion-focusable/);
+ await expect(radios.nth(1)).toHaveClass(/ion-focusable/);
+ });
+ });
+});
+
/**
* This behavior does not vary across directions
*/
diff --git a/core/src/components/toggle/test/a11y/toggle.e2e.ts b/core/src/components/toggle/test/a11y/toggle.e2e.ts
index 26f5e1f496f..6a50f9de123 100644
--- a/core/src/components/toggle/test/a11y/toggle.e2e.ts
+++ b/core/src/components/toggle/test/a11y/toggle.e2e.ts
@@ -21,3 +21,63 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
});
});
});
+
+/**
+ * These assert the `ion-focusable` class the component controls, not the
+ * rendered ring. `ion-focused` is not asserted directly because it depends on
+ * keyboard-mode detection, which is unreliable on WebKit. The class is
+ * mode-independent, so only md is exercised.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+ test.describe(title('toggle: focus indicator'), () => {
+ test('standalone toggle should be focusable', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Toggle
+
+ `,
+ config
+ );
+
+ const toggle = page.locator('ion-toggle');
+ await expect(toggle).toHaveClass(/ion-focusable/);
+ });
+
+ test('toggle in a single-input item should be focusable', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Toggle
+
+
+ `,
+ config
+ );
+
+ // Unlike checkbox/radio, a single-input item does not suppress a toggle's
+ // own indicator.
+ const toggle = page.locator('ion-toggle');
+ await expect(toggle).toHaveClass(/ion-focusable/);
+ });
+
+ test('toggle in a multi-input item should be focusable', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Toggle 1
+ Toggle 2
+
+
+ `,
+ config
+ );
+
+ const toggles = page.locator('ion-toggle');
+ await expect(toggles.nth(0)).toHaveClass(/ion-focusable/);
+ await expect(toggles.nth(1)).toHaveClass(/ion-focusable/);
+ });
+ });
+});
diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss
index cfe12f1d5b0..02673b45ffc 100644
--- a/core/src/components/toggle/toggle.ios.scss
+++ b/core/src/components/toggle/toggle.ios.scss
@@ -171,3 +171,10 @@
:host(.toggle-disabled) {
opacity: $toggle-ios-disabled-opacity;
}
+
+// iOS Toggle: Keyboard Focus
+// -----------------------------------------
+
+:host(.ion-focused) .toggle-icon {
+ box-shadow: 0 0 0 4px $toggle-ios-focus-ring-color;
+}
diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss
index 65d955e7690..782ddfc9bc2 100644
--- a/core/src/components/toggle/toggle.ios.vars.scss
+++ b/core/src/components/toggle/toggle.ios.vars.scss
@@ -48,3 +48,6 @@ $toggle-ios-disabled-opacity: .3;
/// @prop - The text color of the on/off labels when the toggle is checked
$toggle-ios-on-off-label-checked-color: #fff;
+
+/// @prop - Color of the focus indicator ring for the toggle when focused
+$toggle-ios-focus-ring-color: #{ion-color(primary, base, 0.2)};
diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss
index d0a3bfda360..1a0e01abffa 100644
--- a/core/src/components/toggle/toggle.md.scss
+++ b/core/src/components/toggle/toggle.md.scss
@@ -76,3 +76,10 @@
:host(.toggle-disabled) {
opacity: $toggle-md-disabled-opacity;
}
+
+// Material Design Toggle: Keyboard Focus
+// -----------------------------------------
+
+:host(.ion-focused) .toggle-icon {
+ box-shadow: 0 0 0 4px $toggle-md-focus-ring-color;
+}
diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss
index 63f9ef72c9a..b61fd016312 100644
--- a/core/src/components/toggle/toggle.md.vars.scss
+++ b/core/src/components/toggle/toggle.md.vars.scss
@@ -48,3 +48,6 @@ $toggle-md-on-off-label-color: #000;
/// @prop - The text color of the on/off labels when the toggle is checked
$toggle-md-on-off-label-checked-color: #fff;
+
+/// @prop - Color of the focus indicator ring for the toggle when focused
+$toggle-md-focus-ring-color: #{ion-color(primary, base, 0.2)};
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index b64107e66b0..44f849b2e03 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -59,10 +59,6 @@
width: auto;
}
-:host(.ion-focused) input {
- border: 2px solid #5e9ed6;
-}
-
:host(.toggle-disabled) {
pointer-events: none;
}
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index b46635c8a78..d3963704dbd 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -476,6 +476,10 @@ export class Toggle implements ComponentInterface {
class={createColorClasses(color, {
[mode]: true,
'in-item': hostContext('ion-item', el),
+ // A toggle always shows its own focus indicator: unlike checkbox and
+ // radio, it is excluded from the item's input cover, so an item never
+ // draws a focus indicator on its behalf.
+ 'ion-focusable': true,
'toggle-activated': activated,
'toggle-checked': checked,
'toggle-disabled': disabled,