fix(overlays): show focus indicators only during keyboard navigation and improve focus management

core/src/components/action-sheet/action-sheet.tsx

@@ -642,6 +642,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               class="action-sheet-group"
               ref={(el) => (this.groupEl = el)}
               role={hasRadioButtons ? 'radiogroup' : undefined}
+              data-roving-focus={hasRadioButtons ? true : undefined}
             >
               {header !== undefined && (
                 <div

core/src/components/checkbox/checkbox.common.scss

@@ -53,6 +53,11 @@
   width: auto;
 }
 
+// Hide the native focus outline.
+:host(:focus) {
+  outline: none;
+}
+
 .checkbox-wrapper {
   display: flex;
 

core/src/components/checkbox/checkbox.tsx

@@ -353,6 +353,7 @@ export class Checkbox implements ComponentInterface {
     } = this;
     const theme = getIonTheme(this);
     const path = getSVGPath(theme, indeterminate);
+    const inItem = hostContext('ion-item', el);
 
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
@@ -375,10 +376,11 @@ export class Checkbox implements ComponentInterface {
         onClick={this.onClick}
         class={createColorClasses(color, {
           [theme]: true,
-          'in-item': hostContext('ion-item', el),
+          'in-item': inItem,
           'checkbox-checked': checked,
           'checkbox-disabled': disabled,
-          'ion-focusable': true,
+          // Focus styling should not apply when the checkbox is in an item
+          'ion-focusable': !inItem,
           'checkbox-indeterminate': indeterminate,
           interactive: true,
           [`checkbox-justify-${justify}`]: justify !== undefined,

core/src/components/item/item.tsx

@@ -259,7 +259,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
 
   private isFocusable(): boolean {
     const focusableChild = this.el.querySelector('.ion-focusable');
-    return this.canActivate() || focusableChild !== null;
+    // An item is focusable when it can receive keyboard focus: when it is
+    // clickable (has a `button` or `href`), when it has a single input cover
+    // (e.g. a radio or checkbox), or when it contains a focusable child.
+    // Focusable items get the `ion-focusable` class so the `ion-focused`
+    // class is applied while tabbing through them.
+    return this.isClickable() || this.hasCover() || focusableChild !== null;
   }
 
   private hasStartEl() {

core/src/components/modal/modal.tsx

@@ -1693,6 +1693,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
               aria-label="Activate to adjust the size of the dialog overlaying the screen"
               onClick={isHandleCycle ? this.onHandleClick : undefined}
               part="handle"
+              data-focus-order="1"
               ref={(el) => (this.dragHandleEl = el)}
             ></button>
           )}

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -391,6 +391,75 @@ configs({ modes: ['ios', 'ionic-ios'], directions: ['ltr'] }).forEach(({ title,
 
       await expect(dragHandle).toBeFocused();
     });
+
+    test('it should preserve the last arrow-focused radio when tabbing', async ({ page, pageUtils }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-button id="open-modal">Open</ion-button>
+          <ion-modal trigger="open-modal">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Options</ion-title>
+                <ion-buttons slot="end">
+                  <ion-button id="cancel-button">Cancel</ion-button>
+                </ion-buttons>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <ion-list>
+                <ion-radio-group value="one">
+                  <ion-item>
+                    <ion-radio value="one">One</ion-radio>
+                  </ion-item>
+                  <ion-item>
+                    <ion-radio value="two">Two</ion-radio>
+                  </ion-item>
+                  <ion-item>
+                    <ion-radio value="three">Three</ion-radio>
+                  </ion-item>
+                </ion-radio-group>
+              </ion-list>
+            </ion-content>
+          </ion-modal>
+        </ion-app>
+        <script>
+          const modal = document.querySelector('ion-modal');
+          const cancelButton = document.querySelector('#cancel-button');
+
+          modal.breakpoints = [0, 0.5, 1];
+          modal.initialBreakpoint = 0.5;
+          modal.handleBehavior = 'cycle';
+
+          cancelButton.addEventListener('click', () => {
+            modal.dismiss();
+          });
+        </script>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#open-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      const firstRadio = modal.locator('ion-radio').nth(0);
+      const secondRadio = modal.locator('ion-radio').nth(1);
+      const handle = modal.locator('.modal-handle');
+
+      await firstRadio.focus();
+      await expect(firstRadio).toBeFocused();
+
+      await pageUtils.pressKeys('ArrowDown');
+      await expect(secondRadio).toBeFocused();
+
+      await pageUtils.pressKeys('Tab');
+      await expect(handle).toBeFocused();
+    });
   });
 
   test.describe(title('sheet modal: drag events'), () => {

core/src/components/radio-group/radio-group.tsx

@@ -386,6 +386,7 @@ export class RadioGroup implements ComponentInterface {
         aria-labelledby={label ? labelId : null}
         aria-describedby={this.hintTextId}
         aria-invalid={this.isInvalid ? 'true' : undefined}
+        data-roving-focus
         onClick={this.onClick}
       >
         {this.renderHintText()}

core/src/components/radio/radio.common.scss

@@ -51,6 +51,7 @@ input {
   box-sizing: border-box;
 }
 
+// Hide the native focus outline.
 :host(:focus) {
   outline: none;
 }

core/src/components/select-modal/select-modal.ionic.scss

@@ -23,18 +23,6 @@ ion-item {
   --border-radius: #{globals.$ion-border-radius-400};
 }
 
-// TODO(): Remove this when the focus styles are added back to the interface
-ion-item.ion-focused::part(native)::after {
-  // Your styles for the ::after pseudo element when ion-item is focused
-  outline: none;
-}
-
-ion-item.ion-focused.item-checkbox-checked,
-ion-item.ion-focused.item-radio-checked {
-  --background-focused: #{globals.$ion-bg-primary-subtle-default};
-  --background-focused-opacity: 1;
-}
-
 // Toolbar
 // ----------------------------------------------------------------
 

core/src/components/select-modal/select-modal.tsx

@@ -143,6 +143,7 @@ export class SelectModal implements ComponentInterface {
           return (
             <ion-item
               lines="none"
+              data-focus-ignore
               // TODO FW-4784
               disabled={option.disabled}
               class={{
@@ -210,6 +211,7 @@ export class SelectModal implements ComponentInterface {
 
       return (
         <ion-item
+          data-focus-ignore
           // TODO FW-4784
           disabled={option.disabled}
           class={{
@@ -254,7 +256,11 @@ export class SelectModal implements ComponentInterface {
             {this.header !== undefined && <ion-title>{this.header}</ion-title>}
 
             <ion-buttons slot="end">
-              <ion-button aria-label={this.cancelIcon ? this.cancelText : undefined} onClick={() => this.closeModal()}>
+              <ion-button
+                aria-label={this.cancelIcon ? this.cancelText : undefined}
+                data-focus-order="2"
+                onClick={() => this.closeModal()}
+              >
                 {this.cancelIcon ? (
                   <ion-icon aria-hidden="true" slot="icon-only" icon={this.cancelButtonIcon}></ion-icon>
                 ) : (

core/src/components/select/select.tsx

@@ -4,7 +4,7 @@ import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h,
 import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
 import type { NotchController } from '@utils/forms';
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from '@utils/forms';
-import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
+import { suppressFocusVisible, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { actionSheetController, alertController, popoverController, modalController } from '@utils/overlays';
@@ -436,54 +436,72 @@ export class Select implements ComponentInterface {
     // Add logic to scroll selected item into view before presenting
     const scrollSelectedIntoView = () => {
       const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
+
+      /**
+       * Determine which option to focus when the overlay opens: the selected
+       * option if the select has a value, otherwise the first enabled option.
+       */
+      let optionToFocus: HTMLElement | null = null;
+
       if (indexOfSelected > -1) {
         const selectedItem = overlay.querySelector<HTMLElement>(
           `.select-interface-option:nth-of-type(${indexOfSelected + 1})`
         );
 
+        /**
+         * If the option contains an `ion-radio` or `ion-checkbox`, focus
+         * that instead of the option element itself. This ensures that
+         * screen readers will announce the role and state of the element
+         * (e.g. "radio button, checked") rather than only the option text.
+         * Alert and action sheet options are plain buttons, so fall back to
+         * focusing the option element itself in those cases.
+         */
         if (selectedItem) {
-          /**
-           * Browsers such as Firefox do not
-           * correctly delegate focus when manually
-           * focusing an element with delegatesFocus.
-           * We work around this by manually focusing
-           * the interactive element.
-           * ion-radio and ion-checkbox are the only
-           * elements that ion-select-popover uses, so
-           * we only need to worry about those two components
-           * when focusing.
-           */
-          const interactiveEl = selectedItem.querySelector<HTMLElement>('ion-radio, ion-checkbox') as
-            | HTMLIonRadioElement
-            | HTMLIonCheckboxElement
-            | null;
+          const interactiveEl = selectedItem.querySelector<HTMLElement>('ion-radio, ion-checkbox');
           if (interactiveEl) {
             selectedItem.scrollIntoView({ block: 'nearest' });
-            // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
-            // and removing `ion-focused` style
-            interactiveEl.setFocus();
           }
-
-          focusVisibleElement(selectedItem);
+          optionToFocus = interactiveEl ?? selectedItem;
         }
       } else {
         /**
          * If no value is set then focus the first enabled option.
          */
-        const firstEnabledOption = overlay.querySelector<HTMLElement>(
+        optionToFocus = overlay.querySelector<HTMLElement>(
           'ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)'
-        ) as HTMLIonRadioElement | HTMLIonCheckboxElement | null;
+        );
+      }
 
-        if (firstEnabledOption) {
-          /**
-           * Focus the option for the same reason as we do above.
-           *
-           * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
-           * and removing `ion-focused` style
-           */
-          firstEnabledOption.setFocus();
+      if (optionToFocus) {
+        /**
+         * Focus the option directly (`setFocus()`/`focus()`) rather than
+         * with `focusVisibleElement()`. `focusVisibleElement()` forces the
+         * `ion-focused` focus ring on regardless of how the overlay was
+         * opened, whereas a plain focus lets the focus-visible utility
+         * decide: it shows the ring only when the overlay was opened with
+         * the keyboard and hides it for pointer opens.
+         *
+         * `ion-radio` and `ion-checkbox` expose `setFocus`, which correctly
+         * delegates focus to their inner focusable element. This is needed
+         * because browsers such as Firefox do not delegate focus correctly
+         * when focusing an element with delegatesFocus. When the option is
+         * a plain button it can be focused directly.
+         */
+        if (optionToFocus.matches('ion-radio, ion-checkbox')) {
+          (optionToFocus as HTMLIonRadioElement | HTMLIonCheckboxElement).setFocus();
+        } else {
+          optionToFocus.focus();
+        }
 
-          focusVisibleElement(firstEnabledOption.closest('ion-item')!);
+        /**
+         * In the alert interface, when tabbing and pressing enter to open
+         * the select, the value that is currently selected flashes the
+         * focused state briefly before moving to its wrapper. This suppresses
+         * the focus visible state, so that the option will only show as
+         * focused when navigating with the keyboard.
+         */
+        if (this.interface === 'alert') {
+          suppressFocusVisible();
         }
       }
     };

core/src/components/select/test/basic/index.html

@@ -340,6 +340,7 @@
           header: 'Pizza Toppings are really long',
           breakpoints: [0.5],
           initialBreakpoint: 0.5,
+          handleBehavior: 'cycle',
         };
         customModalSelect.interfaceOptions = customModalSheetOptions;