fix(overlays,picker): remove invalid aria-hidden attribute (#30563)

Issue number: resolves #30040

---------

## What is the current behavior?
- The usage of `aria-hidden="true"` attributes both on overlay and
picker components was causing some console error/warnings messages.
- This was being caused due the fact of the activeElement (focused
element) was inside those elements with this attribute that's equal to
true in all cases.


![d13215a4-a610-4b1f-81d8-ce3ae05df790](https://github.com/user-attachments/assets/1b79c8bf-b23a-4165-8fb4-894be27bbad4)

## What is the new behavior?
- There is no need of making usage of this attribute due the facts:
- 1. Once overlay is closed the focus will be redirect to the element
that triggers the overlay, this way screen readers will be also
redirected to the same context of focused element.
- 2. After overlay is closed, it will be set as a `display: none;`
through the selector `:host(.overlay-hidden)`, which by itself will
disable overlay content for the screen readers.

- Removed overlay tests since they were basically checking about
`aria-hidden` attribute.
- Updated PickerColumn and PickerColumnOption structure in order to fit
the a11y needs.
- Added a focus management system to better drive users when making
usage of keyboard navigation inside picker.
- Skip A11Y test validation when reported violation is color contrast
related.

### ⚠️ NOTE:
- Reported devTools issue/warning when selecting picker is **from now
on** expected due to focus an input that's set with `tabIndex="-1"` and
`aria-hidden="true"` - Which turns into an A11Y violation when it gets
focused.
It happens that it gets focused dynamically in order to open the native
numeric keyboard **once user selects highlighted picker values zone**,
in order to allow users to insert numeric values through the keyboard.
If this `aria-hidden` and `tabindex` are removed/updated, the existing
functionality will be lost since ScreenReaders will start to ignore the
updated value through the PickerChange and will be focused onto the
focused input.
This mentioned input has an onChange event that's used to update the
`aria-valuetext` on each `picker-column` which is being capture by the
ScreenReader.
That said, this new devTools reported issue/warning is a false positive
since A11Y behaviour is being covered through a different perspective.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Testing:

- ✅ [ActionSheet
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/action-sheet/test/a11y)
- ✅ [Alert
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/alert/test/a11y)
- ✅ [DateTime
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime/test/basic)
- ✅ [DateTime Button
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/datetime-button/test/basic)
- ✅ [Modal
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/modal/test/a11y)
- ✅ [Popover
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/popover/test/basic)
- ✅ [Select
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/select/test/basic)
- ✅ [Picker, PickerColumn and PickerColumnOption
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/picker/test/basic)
- ✅ [Toast
Preview](https://ionic-framework-git-rou-11368-to-main-ionic1.vercel.app/src/components/toast/test/a11y)

## Other Information

Dev build: `8.7.4-dev.11756388042.1a103a79`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

core/src/components/datetime/datetime.tsx

@@ -3,6 +3,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTa
 import { startFocusVisible } from '@utils/focus-visible';
 import { getElementRoot, raf, renderHiddenInput } from '@utils/helpers';
 import { printIonError, printIonWarning } from '@utils/logging';
+import { FOCUS_TRAP_DISABLE_CLASS } from '@utils/overlays';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
@@ -1598,7 +1599,7 @@ export class Datetime implements ComponentInterface {
       forcePresentation === 'time-date'
         ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
         : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-    return <ion-picker>{renderArray}</ion-picker>;
+    return <ion-picker class={FOCUS_TRAP_DISABLE_CLASS}>{renderArray}</ion-picker>;
   }
 
   private renderDatePickerColumns(forcePresentation: string) {

core/src/components/menu/menu.tsx

@@ -418,6 +418,9 @@ export class Menu implements ComponentInterface, MenuI {
    */
   @Method()
   setOpen(shouldOpen: boolean, animated = true, role?: string): Promise<boolean> {
+    // Blur the active element to prevent it from being kept focused inside an element that will be set with aria-hidden="true"
+    (document.activeElement as HTMLElement)?.blur();
+
     return menuController._setOpen(this, shouldOpen, animated, role);
   }
 

core/src/components/picker-column-option/picker-column-option.scss

@@ -3,7 +3,7 @@
 // Picker Column
 // --------------------------------------------------
 
-button {
+.picker-column-option-button {
   @include padding(0);
   @include margin(0);
 
@@ -40,6 +40,6 @@ button {
   opacity: 0.4;
 }
 
-:host(.option-disabled) button {
+:host(.option-disabled) .picker-column-option-button {
   cursor: default;
 }

core/src/components/picker-column-option/picker-column-option.tsx

@@ -124,9 +124,9 @@ export class PickerColumnOption implements ComponentInterface {
           ['option-disabled']: disabled,
         })}
       >
-        <button tabindex="-1" aria-label={ariaLabel} disabled={disabled} onClick={() => this.onClick()}>
+        <div class={'picker-column-option-button'} role="button" aria-label={ariaLabel} onClick={() => this.onClick()}>
           <slot></slot>
-        </button>
+        </div>
       </Host>
     );
   }

core/src/components/picker-column-option/test/a11y/picker-column-option.e2e.ts

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.goto(`/src/components/picker-column-option/test/a11y`, config);
 
-      const results = await new AxeBuilder({ page }).analyze();
+      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
 
       expect(results.violations).toEqual([]);
     });

core/src/components/picker-column-option/test/picker-column-option.spec.ts

@@ -3,7 +3,7 @@ import { newSpecPage } from '@stencil/core/testing';
 import { PickerColumnOption } from '../picker-column-option';
 
 describe('picker column option', () => {
-  it('button should be enabled by default', async () => {
+  it('should be enabled by default', async () => {
     const page = await newSpecPage({
       components: [PickerColumnOption],
       html: `
@@ -12,12 +12,11 @@ describe('picker column option', () => {
     });
 
     const option = page.body.querySelector('ion-picker-column-option')!;
-    const button = option.shadowRoot!.querySelector('button')!;
 
-    await expect(button.hasAttribute('disabled')).toEqual(false);
+    await expect(option.classList.contains('option-disabled')).toEqual(false);
   });
 
-  it('button should be disabled if specified', async () => {
+  it('should be disabled if specified', async () => {
     const page = await newSpecPage({
       components: [PickerColumnOption],
       html: `
@@ -26,8 +25,7 @@ describe('picker column option', () => {
     });
 
     const option = page.body.querySelector('ion-picker-column-option')!;
-    const button = option.shadowRoot!.querySelector('button')!;
 
-    await expect(button.hasAttribute('disabled')).toEqual(true);
+    await expect(option.classList.contains('option-disabled')).toEqual(true);
   });
 });

core/src/components/picker-column/picker-column.tsx

@@ -653,39 +653,6 @@ export class PickerColumn implements ComponentInterface {
     return el ? el.getAttribute('aria-label') ?? el.innerText : '';
   };
 
-  /**
-   * Render an element that overlays the column. This element is for assistive
-   * tech to allow users to navigate the column up/down. This element should receive
-   * focus as it listens for synthesized keyboard events as required by the
-   * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
-   */
-  private renderAssistiveFocusable = () => {
-    const { activeItem } = this;
-    const valueText = this.getOptionValueText(activeItem);
-
-    /**
-     * When using the picker, the valuetext provides important context that valuenow
-     * does not. Additionally, using non-zero valuemin/valuemax values can cause
-     * WebKit to incorrectly announce numeric valuetext values (such as a year
-     * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
-     */
-    return (
-      <div
-        ref={(el) => (this.assistiveFocusable = el)}
-        class="assistive-focusable"
-        role="slider"
-        tabindex={this.disabled ? undefined : 0}
-        aria-label={this.ariaLabel}
-        aria-valuemin={0}
-        aria-valuemax={0}
-        aria-valuenow={0}
-        aria-valuetext={valueText}
-        aria-orientation="vertical"
-        onKeyDown={(ev) => this.onKeyDown(ev)}
-      ></div>
-    );
-  };
-
   render() {
     const { color, disabled, isActive, numericInput } = this;
     const mode = getIonMode(this);
@@ -699,33 +666,21 @@ export class PickerColumn implements ComponentInterface {
           ['picker-column-disabled']: disabled,
         })}
       >
-        {this.renderAssistiveFocusable()}
         <slot name="prefix"></slot>
         <div
-          aria-hidden="true"
           class="picker-opts"
           ref={(el) => {
             this.scrollEl = el;
           }}
-          /**
-           * When an element has an overlay scroll style and
-           * a fixed height, Firefox will focus the scrollable
-           * container if the content exceeds the container's
-           * dimensions.
-           *
-           * This causes keyboard navigation to focus to this
-           * element instead of going to the next element in
-           * the tab order.
-           *
-           * The desired behavior is for the user to be able to
-           * focus the assistive focusable element and tab to
-           * the next element in the tab order. Instead of tabbing
-           * to this element.
-           *
-           * To prevent this, we set the tabIndex to -1. This
-           * will match the behavior of the other browsers.
-           */
-          tabIndex={-1}
+          role="slider"
+          tabindex={this.disabled ? undefined : 0}
+          aria-label={this.ariaLabel}
+          aria-valuemin={0}
+          aria-valuemax={0}
+          aria-valuenow={0}
+          aria-valuetext={this.getOptionValueText(this.activeItem)}
+          aria-orientation="vertical"
+          onKeyDown={(ev) => this.onKeyDown(ev)}
         >
           <div class="picker-item-empty" aria-hidden="true">
             &nbsp;

core/src/components/picker-column/test/picker-column.spec.tsx

@@ -1,10 +1,10 @@
 import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
-import { PickerColumn } from '../picker-column';
 import { PickerColumnOption } from '../../picker-column-option/picker-column-option';
+import { PickerColumn } from '../picker-column';
 
-describe('picker-column: assistive element', () => {
+describe('picker-column', () => {
   beforeEach(() => {
     const mockIntersectionObserver = jest.fn();
     mockIntersectionObserver.mockReturnValue({
@@ -22,9 +22,9 @@ describe('picker-column: assistive element', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
 
-    expect(assistiveFocusable.getAttribute('aria-label')).not.toBe(null);
+    expect(pickerOpts.getAttribute('aria-label')).not.toBe(null);
   });
 
   it('should have a custom label', async () => {
@@ -34,9 +34,9 @@ describe('picker-column: assistive element', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
 
-    expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
+    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
   });
 
   it('should update a custom label', async () => {
@@ -46,12 +46,12 @@ describe('picker-column: assistive element', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
 
     pickerCol.setAttribute('aria-label', 'my label');
     await page.waitForChanges();
 
-    expect(assistiveFocusable.getAttribute('aria-label')).toBe('my label');
+    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
   });
 
   it('should receive keyboard focus when enabled', async () => {
@@ -61,9 +61,9 @@ describe('picker-column: assistive element', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;
 
-    expect(assistiveFocusable.tabIndex).toBe(0);
+    expect(pickerOpts.tabIndex).toBe(0);
   });
 
   it('should not receive keyboard focus when disabled', async () => {
@@ -73,9 +73,9 @@ describe('picker-column: assistive element', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector<HTMLElement>('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;
 
-    expect(assistiveFocusable.tabIndex).toBe(-1);
+    expect(pickerOpts.tabIndex).toBe(-1);
   });
 
   it('should use option aria-label as assistive element aria-valuetext', async () => {
@@ -91,9 +91,9 @@ describe('picker-column: assistive element', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
 
-    expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Label');
+    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Label');
   });
 
   it('should use option text as assistive element aria-valuetext when no label provided', async () => {
@@ -107,8 +107,8 @@ describe('picker-column: assistive element', () => {
     });
 
     const pickerCol = page.body.querySelector('ion-picker-column')!;
-    const assistiveFocusable = pickerCol.shadowRoot!.querySelector('.assistive-focusable')!;
+    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;
 
-    expect(assistiveFocusable.getAttribute('aria-valuetext')).toBe('My Text');
+    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Text');
   });
 });

core/src/components/picker/test/a11y/picker.e2e.ts

@@ -7,7 +7,7 @@ configs().forEach(({ title, config }) => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.goto(`/src/components/picker/test/a11y`, config);
 
-      const results = await new AxeBuilder({ page }).analyze();
+      const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
 
       expect(results.violations).toEqual([]);
     });

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

@@ -177,6 +177,10 @@
         'onion'
       );
 
+      const columnDualNumericFirst = document.querySelector('ion-picker-column#dual-numeric-first');
+      columnDualNumericFirst.addEventListener('ionChange', (ev) => {
+        console.log('Column change', ev.detail);
+      });
       setPickerColumn(
         '#dual-numeric-first',
         [
@@ -195,6 +199,10 @@
         ],
         3
       );
+      const columnDualNumericSecond = document.querySelector('ion-picker-column#dual-numeric-second');
+      columnDualNumericSecond.addEventListener('ionChange', (ev) => {
+        console.log('Column change', ev.detail);
+      });
       setPickerColumn('#dual-numeric-second', minutes, 3);
 
       setPickerColumn(

core/src/components/picker/test/basic/picker.e2e.ts

@@ -106,32 +106,43 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
 
     test('tabbing should correctly move focus between columns', async ({ page }) => {
-      const firstColumn = page.locator('ion-picker-column#first');
-      const secondColumn = page.locator('ion-picker-column#second');
+      const firstColumn = await page.evaluate(() => document.querySelector('ion-picker-column#first'));
+      const secondColumn = await page.evaluate(() => document.querySelector('ion-picker-column#second'));
 
       // Focus first column
       await page.keyboard.press('Tab');
-      await expect(firstColumn).toBeFocused();
+
+      let activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(firstColumn);
 
       await page.waitForChanges();
 
       // Focus second column
       await page.keyboard.press('Tab');
-      await expect(secondColumn).toBeFocused();
+
+      activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(secondColumn);
     });
 
     test('tabbing should correctly move focus back', async ({ page }) => {
-      const firstColumn = page.locator('ion-picker-column#first');
-      const secondColumn = page.locator('ion-picker-column#second');
+      const firstColumn = await page.evaluate(() => document.querySelector('ion-picker-column#first'));
+      const secondColumn = await page.evaluate(() => document.querySelector('ion-picker-column#second'));
 
-      await secondColumn.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
-      await expect(secondColumn).toBeFocused();
+      await page.evaluate((selector) => {
+        const el = document.querySelector(selector) as HTMLElement | null;
+        el?.focus();
+      }, 'ion-picker-column#second');
+
+      let activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(secondColumn);
 
       await page.waitForChanges();
 
       // Focus first column
       await page.keyboard.press('Shift+Tab');
-      await expect(firstColumn).toBeFocused();
+
+      activeElement = await page.evaluate(() => document.activeElement);
+      expect(activeElement).toEqual(firstColumn);
     });
   });
 });

core/src/components/picker/test/keyboard-entry/picker.e2e.ts

@@ -38,8 +38,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       );
 
       const column = page.locator('ion-picker-column');
+
+      const colShadowRoot = await column.evaluateHandle((el) => el.shadowRoot);
+      const columnPickerOpts = await colShadowRoot.evaluateHandle((root) => root?.querySelector('.picker-opts'));
+
       const ionChange = await page.spyOnEvent('ionChange');
-      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
+      await columnPickerOpts.evaluate((el) => el && (el as HTMLElement).focus());
 
       await page.keyboard.press('Digit2');
 
@@ -99,23 +103,25 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       );
       const firstColumn = page.locator('ion-picker-column#first');
       const secondColumn = page.locator('ion-picker-column#second');
-      const highlight = page.locator('ion-picker .picker-highlight');
       const firstIonChange = await (firstColumn as E2ELocator).spyOnEvent('ionChange');
       const secondIonChange = await (secondColumn as E2ELocator).spyOnEvent('ionChange');
 
-      const box = await highlight.boundingBox();
-      if (box !== null) {
-        await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
-      }
+      const firstColShadowRoot = await firstColumn.evaluateHandle((el) => el.shadowRoot);
+      const columnPickerOpts = await firstColShadowRoot.evaluateHandle((root) => root?.querySelector('.picker-opts'));
 
-      await expect(firstColumn).toHaveClass(/picker-column-active/);
-      await expect(secondColumn).toHaveClass(/picker-column-active/);
+      // Focus first column
+      await columnPickerOpts.evaluate((el) => el && (el as HTMLElement).focus());
 
       await page.keyboard.press('Digit2');
 
       await expect(firstIonChange).toHaveReceivedEventDetail({ value: 2 });
       await expect(firstColumn).toHaveJSProperty('value', 2);
 
+      // Focus second column
+      await page.keyboard.press('Tab');
+
+      await page.waitForChanges();
+
       await page.keyboard.press('Digit2+Digit4');
 
       await expect(secondIonChange).toHaveReceivedEventDetail({ value: 24 });
@@ -155,8 +161,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       );
 
       const column = page.locator('ion-picker-column');
+
+      const colShadowRoot = await column.evaluateHandle((el) => el.shadowRoot);
+      const columnPickerOpts = await colShadowRoot.evaluateHandle((root) => root?.querySelector('.picker-opts'));
+
       const ionChange = await page.spyOnEvent('ionChange');
-      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
+      await columnPickerOpts.evaluate((el) => el && (el as HTMLElement).focus());
 
       await page.keyboard.press('Digit0');
 

core/src/utils/overlays.ts

@@ -32,7 +32,6 @@ import {
   getElementRoot,
   removeEventListener,
 } from './helpers';
-import { isPlatform } from './platform';
 
 let lastOverlayIndex = 0;
 let lastId = 0;
@@ -487,7 +486,7 @@ export const getPresentedOverlay = (
  */
 export const setRootAriaHidden = (hidden = false) => {
   const root = getAppRoot(document);
-  const viewContainer = root.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
+  const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
 
   if (!viewContainer) {
     return;
@@ -495,8 +494,10 @@ export const setRootAriaHidden = (hidden = false) => {
 
   if (hidden) {
     viewContainer.setAttribute('aria-hidden', 'true');
+    viewContainer.setAttribute('inert', '');
   } else {
     viewContainer.removeAttribute('aria-hidden');
+    viewContainer.removeAttribute('inert');
   }
 };
 
@@ -511,6 +512,18 @@ export const present = async <OverlayPresentOptions>(
     return;
   }
 
+  /**
+   * When an overlay that steals focus
+   * is dismissed, focus should be returned
+   * to the element that was focused
+   * prior to the overlay opening. Toast
+   * does not steal focus and is excluded
+   * from returning focus as a result.
+   */
+  if (overlay.el.tagName !== 'ION-TOAST') {
+    restoreElementFocus(overlay.el);
+  }
+
   /**
    * Due to accessibility guidelines, toasts do not have
    * focus traps.
@@ -523,9 +536,6 @@ export const present = async <OverlayPresentOptions>(
     document.body.classList.add(BACKDROP_NO_SCROLL);
   }
 
-  hideUnderlyingOverlaysFromScreenReaders(overlay.el);
-  hideAnimatingOverlayFromScreenReaders(overlay.el);
-
   overlay.presented = true;
   overlay.willPresent.emit();
   overlay.willPresentShorthand?.emit();
@@ -542,18 +552,6 @@ export const present = async <OverlayPresentOptions>(
     overlay.didPresentShorthand?.emit();
   }
 
-  /**
-   * When an overlay that steals focus
-   * is dismissed, focus should be returned
-   * to the element that was focused
-   * prior to the overlay opening. Toast
-   * does not steal focus and is excluded
-   * from returning focus as a result.
-   */
-  if (overlay.el.tagName !== 'ION-TOAST') {
-    restoreElementFocus(overlay.el);
-  }
-
   /**
    * If the focused element is already
    * inside the overlay component then
@@ -577,6 +575,7 @@ export const present = async <OverlayPresentOptions>(
    * screen readers.
    */
   overlay.el.removeAttribute('aria-hidden');
+  overlay.el.removeAttribute('inert');
 };
 
 /**
@@ -595,6 +594,9 @@ const restoreElementFocus = async (overlayEl: any) => {
     return;
   }
 
+  // Ensure active element is blurred to prevent a11y warning issues
+  previousElement.blur();
+
   const shadowRoot = previousElement?.shadowRoot;
   if (shadowRoot) {
     // If there are no inner focusable elements, just focus the host element.
@@ -674,13 +676,6 @@ export const dismiss = async <OverlayDismissOptions>(
   overlay.presented = false;
 
   try {
-    /**
-     * There is no need to show the overlay to screen readers during
-     * the dismiss animation. This is because the overlay will be removed
-     * from the DOM after the animation is complete.
-     */
-    hideAnimatingOverlayFromScreenReaders(overlay.el);
-
     // Overlay contents should not be clickable during dismiss
     overlay.el.style.setProperty('pointer-events', 'none');
     overlay.willDismiss.emit({ data, role });
@@ -728,8 +723,6 @@ export const dismiss = async <OverlayDismissOptions>(
 
   overlay.el.remove();
 
-  revealOverlaysToScreenReaders();
-
   return true;
 };
 
@@ -966,98 +959,4 @@ export const createTriggerController = () => {
   };
 };
 
-/**
- * The overlay that is being animated also needs to hide from screen
- * readers during its animation. This ensures that assistive technologies
- * like TalkBack do not announce or interact with the content until the
- * animation is complete, avoiding confusion for users.
- *
- * When the overlay is presented on an Android device, TalkBack's focus rings
- * may appear in the wrong position due to the transition (specifically
- * `transform` styles). This occurs because the focus rings are initially
- * displayed at the starting position of the elements before the transition
- * begins. This workaround ensures the focus rings do not appear in the
- * incorrect location.
- *
- * If this solution is applied to iOS devices, then it leads to a bug where
- * the overlays cannot be accessed by screen readers. This is due to
- * VoiceOver not being able to update the accessibility tree when the
- * `aria-hidden` is removed.
- *
- * @param overlay - The overlay that is being animated.
- */
-const hideAnimatingOverlayFromScreenReaders = (overlay: HTMLIonOverlayElement) => {
-  if (doc === undefined) return;
-
-  if (isPlatform('android')) {
-    /**
-     * Once the animation is complete, this attribute will be removed.
-     * This is done at the end of the `present` method.
-     */
-    overlay.setAttribute('aria-hidden', 'true');
-  }
-};
-
-/**
- * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
- * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
- * events here because those events do not fire when the screen readers moves to a non-focusable
- * element such as text.
- * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
- *
- * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
- * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
- */
-const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay: HTMLIonOverlayElement) => {
-  if (doc === undefined) return;
-
-  const overlays = getPresentedOverlays(doc);
-
-  for (let i = overlays.length - 1; i >= 0; i--) {
-    const presentedOverlay = overlays[i];
-    const nextPresentedOverlay = overlays[i + 1] ?? newTopMostOverlay;
-
-    /**
-     * If next overlay has aria-hidden then all remaining overlays will have it too.
-     * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
-     * should not have aria-hidden either so focus can remain in the current overlay.
-     */
-    if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
-      presentedOverlay.setAttribute('aria-hidden', 'true');
-    }
-  }
-};
-
-/**
- * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
- * If the top-most overlay is a Toast we potentially need to reveal more overlays since
- * focus is never automatically moved to the Toast.
- */
-const revealOverlaysToScreenReaders = () => {
-  if (doc === undefined) return;
-
-  const overlays = getPresentedOverlays(doc);
-
-  for (let i = overlays.length - 1; i >= 0; i--) {
-    const currentOverlay = overlays[i];
-
-    /**
-     * If the current we are looking at is a Toast then we can remove aria-hidden.
-     * However, we potentially need to keep looking at the overlay stack because there
-     * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
-     * overlay too so focus can move there since focus is never automatically moved to the Toast.
-     */
-    currentOverlay.removeAttribute('aria-hidden');
-
-    /**
-     * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
-     * since this overlay should always receive focus. As a result, all underlying overlays should still
-     * be hidden from screen readers.
-     */
-    if (currentOverlay.tagName !== 'ION-TOAST') {
-      break;
-    }
-  }
-};
-
 export const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';

core/src/utils/test/overlays/overlays.spec.ts

@@ -1,263 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { Modal } from '../../../components/modal/modal';
-import { Toast } from '../../../components/toast/toast';
-import { Nav } from '../../../components/nav/nav';
-import { RouterOutlet } from '../../../components/router-outlet/router-outlet';
-import { setRootAriaHidden } from '../../overlays';
-
-describe('setRootAriaHidden()', () => {
-  it('should correctly remove and re-add router outlet from accessibility tree', async () => {
-    const page = await newSpecPage({
-      components: [RouterOutlet],
-      html: `
-        <ion-router-outlet></ion-router-outlet>
-      `,
-    });
-
-    const routerOutlet = page.body.querySelector('ion-router-outlet')!;
-
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
-
-    setRootAriaHidden(true);
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
-    setRootAriaHidden(false);
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
-  });
-
-  it('should correctly remove and re-add nav from accessibility tree', async () => {
-    const page = await newSpecPage({
-      components: [Nav],
-      html: `
-        <ion-nav></ion-nav>
-      `,
-    });
-
-    const nav = page.body.querySelector('ion-nav')!;
-
-    expect(nav.hasAttribute('aria-hidden')).toEqual(false);
-
-    setRootAriaHidden(true);
-    expect(nav.hasAttribute('aria-hidden')).toEqual(true);
-
-    setRootAriaHidden(false);
-    expect(nav.hasAttribute('aria-hidden')).toEqual(false);
-  });
-
-  it('should correctly remove and re-add custom container from accessibility tree', async () => {
-    const page = await newSpecPage({
-      components: [],
-      html: `
-        <div id="ion-view-container-root"></div>
-        <div id="not-container-root"></div>
-      `,
-    });
-
-    const containerRoot = page.body.querySelector('#ion-view-container-root')!;
-    const notContainerRoot = page.body.querySelector('#not-container-root')!;
-
-    expect(containerRoot.hasAttribute('aria-hidden')).toEqual(false);
-    expect(notContainerRoot.hasAttribute('aria-hidden')).toEqual(false);
-
-    setRootAriaHidden(true);
-    expect(containerRoot.hasAttribute('aria-hidden')).toEqual(true);
-    expect(notContainerRoot.hasAttribute('aria-hidden')).toEqual(false);
-
-    setRootAriaHidden(false);
-    expect(containerRoot.hasAttribute('aria-hidden')).toEqual(false);
-    expect(notContainerRoot.hasAttribute('aria-hidden')).toEqual(false);
-  });
-
-  it('should not error if router outlet was not found', async () => {
-    await newSpecPage({
-      components: [],
-      html: `
-        <div></div>
-      `,
-    });
-
-    setRootAriaHidden(true);
-  });
-
-  it('should remove router-outlet from accessibility tree when overlay is presented', async () => {
-    const page = await newSpecPage({
-      components: [RouterOutlet, Modal],
-      html: `
-        <ion-router-outlet>
-          <ion-modal></ion-modal>
-        </ion-router-outlet>
-      `,
-    });
-
-    const routerOutlet = page.body.querySelector('ion-router-outlet')!;
-    const modal = page.body.querySelector('ion-modal')!;
-
-    await modal.present();
-
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-  });
-
-  it('should add router-outlet from accessibility tree when then final overlay is dismissed', async () => {
-    const page = await newSpecPage({
-      components: [RouterOutlet, Modal],
-      html: `
-        <ion-router-outlet>
-          <ion-modal id="one"></ion-modal>
-          <ion-modal id="two"></ion-modal>
-        </ion-router-outlet>
-      `,
-    });
-
-    const routerOutlet = page.body.querySelector('ion-router-outlet')!;
-    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#one')!;
-    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#two')!;
-
-    await modalOne.present();
-
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
-    await modalTwo.present();
-
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
-    await modalOne.dismiss();
-
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(true);
-
-    await modalTwo.dismiss();
-
-    expect(routerOutlet.hasAttribute('aria-hidden')).toEqual(false);
-  });
-});
-
-describe('aria-hidden on individual overlays', () => {
-  it('should hide non-topmost overlays from screen readers', async () => {
-    const page = await newSpecPage({
-      components: [Modal],
-      html: `
-        <ion-modal id="one"></ion-modal>
-        <ion-modal id="two"></ion-modal>
-      `,
-    });
-
-    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#one')!;
-    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#two')!;
-
-    await modalOne.present();
-    await modalTwo.present();
-
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
-    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
-  });
-
-  it('should unhide new topmost overlay from screen readers when topmost is dismissed', async () => {
-    const page = await newSpecPage({
-      components: [Modal],
-      html: `
-        <ion-modal id="one"></ion-modal>
-        <ion-modal id="two"></ion-modal>
-      `,
-    });
-
-    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#one')!;
-    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#two')!;
-
-    await modalOne.present();
-    await modalTwo.present();
-
-    // dismiss modalTwo so that modalOne becomes the new topmost overlay
-    await modalTwo.dismiss();
-
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
-  });
-
-  it('should not keep overlays hidden from screen readers if presented after being dismissed while non-topmost', async () => {
-    const page = await newSpecPage({
-      components: [Modal],
-      html: `
-        <ion-modal id="one"></ion-modal>
-        <ion-modal id="two"></ion-modal>
-      `,
-    });
-
-    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#one')!;
-    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#two')!;
-
-    await modalOne.present();
-    await modalTwo.present();
-
-    // modalOne is not the topmost overlay at this point and is hidden from screen readers
-    await modalOne.dismiss();
-
-    // modalOne will become the topmost overlay; ensure it isn't still hidden from screen readers
-    await modalOne.present();
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
-  });
-
-  it('should not hide previous overlay if top-most overlay is toast', async () => {
-    const page = await newSpecPage({
-      components: [Modal, Toast],
-      html: `
-        <ion-modal id="m-one"></ion-modal>
-        <ion-modal id="m-two"></ion-modal>
-        <ion-toast id="t-one"></ion-toast>
-        <ion-toast id="t-two"></ion-toast>
-      `,
-    });
-
-    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-one')!;
-    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-two')!;
-    const toastOne = page.body.querySelector<HTMLIonModalElement>('ion-toast#t-one')!;
-    const toastTwo = page.body.querySelector<HTMLIonModalElement>('ion-toast#t-two')!;
-
-    await modalOne.present();
-    await modalTwo.present();
-    await toastOne.present();
-    await toastTwo.present();
-
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
-    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
-    expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
-    expect(toastTwo.hasAttribute('aria-hidden')).toEqual(false);
-
-    await toastTwo.dismiss();
-
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
-    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
-    expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
-
-    await toastOne.dismiss();
-
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
-    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
-  });
-
-  it('should hide previous overlay even with a toast that is not the top-most overlay', async () => {
-    const page = await newSpecPage({
-      components: [Modal, Toast],
-      html: `
-        <ion-modal id="m-one"></ion-modal>
-        <ion-toast id="t-one"></ion-toast>
-        <ion-modal id="m-two"></ion-modal>
-      `,
-    });
-
-    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-one')!;
-    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-two')!;
-    const toastOne = page.body.querySelector<HTMLIonModalElement>('ion-toast#t-one')!;
-
-    await modalOne.present();
-    await toastOne.present();
-    await modalTwo.present();
-
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
-    expect(toastOne.hasAttribute('aria-hidden')).toEqual(true);
-    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
-
-    await modalTwo.dismiss();
-
-    expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
-    expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
-  });
-});

packages/angular/package.json

@@ -37,6 +37,7 @@
     "eslint": "eslint . --ext .ts",
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
     "sync": "./scripts/sync.sh",
+    "local.sync.and.pack": "./scripts/sync-and-pack.sh",
     "test": "echo 'angular no tests yet'",
     "tsc": "tsc -p .",
     "validate": "npm i && npm run lint && npm run test && npm run build"

packages/angular/scripts/sync-and-pack.sh

@@ -0,0 +1,30 @@
+set -e
+
+# Delete old packages
+rm -f *.tgz
+
+# Pack @ionic/core
+echo "\n📦 Packing @ionic/core..."
+npm pack ../../core
+
+# Update package.json with global path for the @ionic/core package
+echo "\n⚙️ Updating package.json with global path for @ionic/core..."
+CORE_PACKAGE=$(ls ionic-core-*.tgz | head -1)
+sed -i "" "s|\"@ionic/core\": \".*\"|\"@ionic/core\": \"file:$(pwd)/$CORE_PACKAGE\"|" package.json
+
+# Remove package-lock.json
+rm -f package-lock.json
+
+# Install Dependencies
+echo "\n🔧 Installing dependencies..."
+npm install
+
+# Build the project
+echo "\n🔨 Building the project..."
+npm run build
+
+# Pack @ionic/angular
+echo "\n📦 Packing @ionic/angular..."
+npm pack ./dist
+
+echo "\n✅ Packed ionic-angular package!\n   $(pwd)/$(ls ionic-angular-*.tgz | head -1)\n"

packages/react/package.json

@@ -30,7 +30,8 @@
     "lint.fix": "npm run eslint -- --fix && npm run prettier -- --write --cache",
     "copy": "node scripts/copy.js",
     "test.spec": "jest --ci",
-    "sync": "sh ./scripts/sync.sh"
+    "sync": "sh ./scripts/sync.sh",
+    "local.sync.and.pack": "./scripts/sync-and-pack.sh"
   },
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",

packages/react/scripts/sync-and-pack.sh

@@ -0,0 +1,30 @@
+set -e
+
+# Delete old packages
+rm -f *.tgz
+
+# Pack @ionic/core
+echo "\n📦 Packing @ionic/core..."
+npm pack ../../core
+
+# Update package.json with global path for the @ionic/core package
+echo "\n⚙️ Updating package.json with global path for @ionic/core..."
+CORE_PACKAGE=$(ls ionic-core-*.tgz | head -1)
+sed -i "" "s|\"@ionic/core\": \".*\"|\"@ionic/core\": \"file:$(pwd)/$CORE_PACKAGE\"|" package.json
+
+# Remove package-lock.json
+rm -f package-lock.json
+
+# Install Dependencies
+echo "\n🔧 Installing dependencies..."
+npm install
+
+# Build the project
+echo "\n🔨 Building the project..."
+npm run build
+
+# Pack @ionic/react
+echo "\n📦 Packing @ionic/react..."
+npm pack
+
+echo "\n✅ Packed @ionic/react package!\n   $(pwd)/$(ls ionic-react-*.tgz | head -1)\n"

packages/vue/package.json

@@ -16,7 +16,8 @@
     "build.vetur": "node ./scripts/build-vetur.js",
     "copy": "node ./scripts/copy-css.js",
     "copy.overlays": "node ./scripts/copy-overlays.js",
-    "sync": "sh ./scripts/sync.sh"
+    "sync": "sh ./scripts/sync.sh",
+    "local.sync.and.pack": "./scripts/sync-and-pack.sh"
   },
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

packages/vue/scripts/sync-and-pack.sh

@@ -0,0 +1,37 @@
+set -e
+
+# Delete old packages
+rm -f *.tgz
+
+# Delete vite cache
+rm -rf node_modules/.vite
+
+# Pack @ionic/core
+echo "\n📦 Packing @ionic/core..."
+npm pack ../../core
+
+# Pack @ionic/vue-router
+echo "\n📦 Packing @ionic/vue-router..."
+npm pack ../vue-router
+
+# Update package.json with global path for the @ionic/core package
+echo "\n⚙️ Updating package.json with global path for @ionic/core..."
+CORE_PACKAGE=$(ls ionic-core-*.tgz | head -1)
+sed -i "" "s|\"@ionic/core\": \".*\"|\"@ionic/core\": \"file:$(pwd)/$CORE_PACKAGE\"|" package.json
+
+# Remove package-lock.json
+rm -f package-lock.json
+
+# Install Dependencies
+echo "\n🔧 Installing dependencies..."
+npm install
+
+# Build the project
+echo "\n🔨 Building the project..."
+npm run build
+
+# Pack @ionic/vue
+echo "\n📦 Packing @ionic/vue..."
+npm pack
+
+echo "\n✅ Packed @ionic/vue package!\n   $(pwd)/$(ls ionic-vue-*.tgz | head -1)\n"