diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 38f9faaadb..dc7cd09002 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -135,7 +135,8 @@ export class Radio implements ComponentInterface { ev.stopPropagation(); ev.preventDefault(); - this.el.focus(); + const element = this.legacyFormController.hasLegacyControl() ? this.el : this.nativeInput; + element.focus(); } /** @internal */ @@ -231,7 +232,18 @@ export class Radio implements ComponentInterface { } private renderRadio() { - const { checked, disabled, inputId, color, el, justify, labelPlacement, inheritedAttributes, hasLabel } = this; + const { + checked, + disabled, + inputId, + color, + el, + justify, + labelPlacement, + inheritedAttributes, + hasLabel, + buttonTabindex, + } = this; const mode = getIonMode(this); const inItem = hostContext('ion-item', el); @@ -260,6 +272,7 @@ export class Radio implements ComponentInterface { checked={checked} disabled={disabled} id={inputId} + tabindex={buttonTabindex} ref={(nativeEl) => (this.nativeInput = nativeEl as HTMLInputElement)} {...inheritedAttributes} /> diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts index bc6fe4c945..6010aa0baf 100644 --- a/core/src/components/radio/test/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/a11y/radio.e2e.ts @@ -15,9 +15,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); }); - // TODO: FW-4155 - Enable tests once tab behavior is fixed for modern syntax. - test.describe.skip(title('radio: keyboard navigation'), () => { - test.beforeEach(async ({ page }) => { + test.describe(title('radio: keyboard navigation'), () => { + test.beforeEach(async ({ page, skip }) => { + // TODO (FW-2979) + skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.'); + await page.setContent( `