@ionic/core 8.4.1-dev.11732305980.19d90e1c → 8.4.1-dev.11732646949.1aaebad5

package/components/focus-visible.js

@@ -16,6 +16,7 @@ const FOCUS_KEYS = [
     'ArrowUp',
     'Home',
     'End',
+    'Meta',
 ];
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
@@ -48,6 +49,7 @@ const startFocusVisible = (rootEl) => {
             });
             setFocus(toFocus);
         }
+        keyboardMode = true;
     };
     const onFocusout = () => {
         if (ref.activeElement === root) {

package/components/ion-menu.js

@@ -8,8 +8,8 @@ import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
 import { shouldUseCloseWatcher } from './hardware-back-button.js';
 import { m as isEndSide, i as inheritAriaAttributes, n as assert, k as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
-import { c as config, b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { h as hostContext } from './theme.js';
+import { c as config, b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './backdrop.js';
 
 const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-pane-visible.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
@@ -463,22 +463,6 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
     }
     beforeAnimation(shouldOpen, role) {
         assert(!this.isAnimating, '_before() should not be called while animating');
-        /**
-         * When the menu 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.
-         */
-        if (isPlatform('android')) {
-            this.el.setAttribute('aria-hidden', 'true');
-        }
         // this places the menu into the correct location before it animates in
         // this css class doesn't actually kick off any animations
         this.el.classList.add(SHOW_MENU);
@@ -531,16 +515,6 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             this.blocker.unblock();
         }
         if (isOpen) {
-            /**
-             * When the menu is presented on an Android device, TalkBack's focus rings
-             * may appear in the wrong position due to the transition (specifically
-             * `transform` styles). The menu is hidden from screen readers during the
-             * transition to prevent this. Once the transition is complete, the menu
-             * is shown again.
-             */
-            if (isPlatform('android')) {
-                this.el.removeAttribute('aria-hidden');
-            }
             // emit open event
             this.ionDidOpen.emit();
             /**
@@ -556,7 +530,6 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             document.addEventListener('focus', this.handleFocus, true);
         }
         else {
-            this.el.removeAttribute('aria-hidden');
             // remove css classes and unhide content from screen readers
             this.el.classList.remove(SHOW_MENU);
             /**
@@ -623,14 +596,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '5aaea91873d0885b97304372223b2a6ed16ca28b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '3ba822411ad11eff52c518fecf1b2a5b47e0b678', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'd28a78e98493b21d43ea8b19e96b21547adf1916' })), h("ion-backdrop", { key: '0468c15d111737f5cb646918dcfacedadf907a8f', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/overlays.js

@@ -889,12 +889,11 @@ const createTriggerController = () => {
  * 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 the overlay is being presented, it prevents focus rings from appearing
+ * in incorrect positions due to the transition (specifically `transform`
+ * styles), ensuring that when aria-hidden is removed, the focus rings are
+ * correctly displayed in the final location of the elements. This only
+ * applies to Android devices.
  *
  * 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

package/dist/cjs/{focus-visible-7a0ce04f.js → focus-visible-2578eb30.js}

@@ -18,6 +18,7 @@ const FOCUS_KEYS = [
     'ArrowUp',
     'Home',
     'End',
+    'Meta',
 ];
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
@@ -50,6 +51,7 @@ const startFocusVisible = (rootEl) => {
             });
             setFocus(toFocus);
         }
+        keyboardMode = true;
     };
     const onFocusout = () => {
         if (ref.activeElement === root) {

package/dist/cjs/index.cjs.js

@@ -16,7 +16,7 @@ const helpers = require('./helpers-afaa9001.js');
 const config = require('./config-4f60b98a.js');
 const theme = require('./theme-d1c573d2.js');
 const index$2 = require('./index-8e789962.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 require('./index-c8d52405.js');
 require('./index-73f75efb.js');
 require('./index-5915f9b3.js');

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
 const buttonActive = require('./button-active-3f2f60b4.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const animation = require('./animation-b4fdf128.js');

package/dist/cjs/ion-alert.cjs.entry.js

@@ -10,7 +10,7 @@ const config = require('./config-4f60b98a.js');
 const buttonActive = require('./button-active-3f2f60b4.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const animation = require('./animation-b4fdf128.js');

package/dist/cjs/ion-app_8.cjs.entry.js

@@ -65,7 +65,7 @@ const App = class {
                 if (typeof window !== 'undefined') {
                     Promise.resolve().then(function () { return require('./keyboard-af1bb365.js'); }).then((module) => module.startKeyboardAssist(window));
                 }
-                Promise.resolve().then(function () { return require('./focus-visible-7a0ce04f.js'); }).then((module) => (this.focusVisible = module.startFocusVisible()));
+                Promise.resolve().then(function () { return require('./focus-visible-2578eb30.js'); }).then((module) => (this.focusVisible = module.startFocusVisible()));
             });
         }
     }

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-73f75efb.js');
-const focusVisible = require('./focus-visible-7a0ce04f.js');
+const focusVisible = require('./focus-visible-2578eb30.js');
 const helpers = require('./helpers-afaa9001.js');
 const index = require('./index-5915f9b3.js');
 const dir = require('./dir-94c21456.js');
@@ -15,7 +15,7 @@ const index$2 = require('./index-073c7cdc.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const data = require('./data-21dc0f81.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const animation = require('./animation-b4fdf128.js');
 const haptic = require('./haptic-f6b37aa3.js');
 require('./index-c8d52405.js');

package/dist/cjs/ion-loading.cjs.entry.js

@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
 const config = require('./config-4f60b98a.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const animation = require('./animation-b4fdf128.js');

package/dist/cjs/ion-menu_3.cjs.entry.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const gestureController = require('./gesture-controller-9436f482.js');
 const hardwareBackButton = require('./hardware-back-button-9e8a2c4f.js');
 const helpers = require('./helpers-afaa9001.js');
 const index$1 = require('./index-8e789962.js');
-const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const theme = require('./theme-d1c573d2.js');
+const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const index$2 = require('./index-073c7cdc.js');
 require('./index-c8d52405.js');
 require('./framework-delegate-55f5683a.js');
@@ -466,22 +466,6 @@ const Menu = class {
     }
     beforeAnimation(shouldOpen, role) {
         helpers.assert(!this.isAnimating, '_before() should not be called while animating');
-        /**
-         * When the menu 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.
-         */
-        if (ionicGlobal.isPlatform('android')) {
-            this.el.setAttribute('aria-hidden', 'true');
-        }
         // this places the menu into the correct location before it animates in
         // this css class doesn't actually kick off any animations
         this.el.classList.add(SHOW_MENU);
@@ -534,16 +518,6 @@ const Menu = class {
             this.blocker.unblock();
         }
         if (isOpen) {
-            /**
-             * When the menu is presented on an Android device, TalkBack's focus rings
-             * may appear in the wrong position due to the transition (specifically
-             * `transform` styles). The menu is hidden from screen readers during the
-             * transition to prevent this. Once the transition is complete, the menu
-             * is shown again.
-             */
-            if (ionicGlobal.isPlatform('android')) {
-                this.el.removeAttribute('aria-hidden');
-            }
             // emit open event
             this.ionDidOpen.emit();
             /**
@@ -559,7 +533,6 @@ const Menu = class {
             document.addEventListener('focus', this.handleFocus, true);
         }
         else {
-            this.el.removeAttribute('aria-hidden');
             // remove css classes and unhide content from screen readers
             this.el.classList.remove(SHOW_MENU);
             /**
@@ -626,14 +599,14 @@ const Menu = class {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (index.h(index.Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (index.h(index.Host, { key: '5aaea91873d0885b97304372223b2a6ed16ca28b', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': theme.hostContext('ion-split-pane', el),
-            } }, index.h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), index.h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, index.h("div", { key: '3ba822411ad11eff52c518fecf1b2a5b47e0b678', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: 'd28a78e98493b21d43ea8b19e96b21547adf1916' })), index.h("ion-backdrop", { key: '0468c15d111737f5cb646918dcfacedadf907a8f', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-modal.cjs.entry.js

@@ -12,7 +12,7 @@ const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
 const index$4 = require('./index-5915f9b3.js');
 const capacitor = require('./capacitor-c04564bf.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const theme = require('./theme-d1c573d2.js');
 const index$5 = require('./index-f05acd21.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');

package/dist/cjs/ion-popover.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const frameworkDelegate = require('./framework-delegate-55f5683a.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const theme = require('./theme-d1c573d2.js');
 require('./index-c8d52405.js');
 require('./helpers-afaa9001.js');

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
 const notchController = require('./notch-controller-d69150f5.js');
 const compareWithUtils = require('./compare-with-utils-df1001d7.js');
 const helpers = require('./helpers-afaa9001.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const watchOptions = require('./watch-options-f5f3e158.js');

package/dist/cjs/ion-toast.cjs.entry.js

@@ -10,7 +10,7 @@ const config = require('./config-4f60b98a.js');
 const helpers = require('./helpers-afaa9001.js');
 const lockController = require('./lock-controller-6585a42a.js');
 const index$1 = require('./index-5915f9b3.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-a6b4fa63.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const animation = require('./animation-b4fdf128.js');

package/dist/cjs/{overlays-aa669eb8.js → overlays-a6b4fa63.js}

@@ -891,12 +891,11 @@ const createTriggerController = () => {
  * 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 the overlay is being presented, it prevents focus rings from appearing
+ * in incorrect positions due to the transition (specifically `transform`
+ * styles), ensuring that when aria-hidden is removed, the focus rings are
+ * correctly displayed in the final location of the elements. This only
+ * applies to Android devices.
  *
  * 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

package/dist/collection/components/menu/menu.js

@@ -9,7 +9,6 @@ import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
-import { isPlatform } from "../../utils/platform";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
@@ -454,22 +453,6 @@ export class Menu {
     }
     beforeAnimation(shouldOpen, role) {
         assert(!this.isAnimating, '_before() should not be called while animating');
-        /**
-         * When the menu 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.
-         */
-        if (isPlatform('android')) {
-            this.el.setAttribute('aria-hidden', 'true');
-        }
         // this places the menu into the correct location before it animates in
         // this css class doesn't actually kick off any animations
         this.el.classList.add(SHOW_MENU);
@@ -522,16 +505,6 @@ export class Menu {
             this.blocker.unblock();
         }
         if (isOpen) {
-            /**
-             * When the menu is presented on an Android device, TalkBack's focus rings
-             * may appear in the wrong position due to the transition (specifically
-             * `transform` styles). The menu is hidden from screen readers during the
-             * transition to prevent this. Once the transition is complete, the menu
-             * is shown again.
-             */
-            if (isPlatform('android')) {
-                this.el.removeAttribute('aria-hidden');
-            }
             // emit open event
             this.ionDidOpen.emit();
             /**
@@ -547,7 +520,6 @@ export class Menu {
             document.addEventListener('focus', this.handleFocus, true);
         }
         else {
-            this.el.removeAttribute('aria-hidden');
             // remove css classes and unhide content from screen readers
             this.el.classList.remove(SHOW_MENU);
             /**
@@ -614,14 +586,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '5aaea91873d0885b97304372223b2a6ed16ca28b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '3ba822411ad11eff52c518fecf1b2a5b47e0b678', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'd28a78e98493b21d43ea8b19e96b21547adf1916' })), h("ion-backdrop", { key: '0468c15d111737f5cb646918dcfacedadf907a8f', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/focus-visible.js

@@ -16,6 +16,7 @@ const FOCUS_KEYS = [
     'ArrowUp',
     'Home',
     'End',
+    'Meta',
 ];
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
@@ -48,6 +49,7 @@ export const startFocusVisible = (rootEl) => {
             });
             setFocus(toFocus);
         }
+        keyboardMode = true;
     };
     const onFocusout = () => {
         if (ref.activeElement === root) {

package/dist/collection/utils/overlays.js

@@ -811,12 +811,11 @@ export const createTriggerController = () => {
  * 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 the overlay is being presented, it prevents focus rings from appearing
+ * in incorrect positions due to the transition (specifically `transform`
+ * styles), ensuring that when aria-hidden is removed, the focus rings are
+ * correctly displayed in the final location of the elements. This only
+ * applies to Android devices.
  *
  * 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

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-22T20:08:22",
+  "timestamp": "2024-11-26T18:51:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",

package/dist/esm/{focus-visible-dd40d69f.js → focus-visible-ab389174.js}

@@ -16,6 +16,7 @@ const FOCUS_KEYS = [
     'ArrowUp',
     'Home',
     'End',
+    'Meta',
 ];
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
@@ -48,6 +49,7 @@ const startFocusVisible = (rootEl) => {
             });
             setFocus(toFocus);
         }
+        keyboardMode = true;
     };
     const onFocusout = () => {
         if (ref.activeElement === root) {

package/dist/esm/index.js

@@ -12,7 +12,7 @@ export { c as componentOnReady } from './helpers-da915de8.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-49c88215.js';
 export { o as openURL } from './theme-01f3f29c.js';
 export { m as menuController } from './index-24b48b06.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-e7b9d6d9.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-dcc93658.js';
 import './index-a5d50daf.js';
 import './index-28849c61.js';
 import './index-9b0d46f4.js';

package/dist/esm/ion-action-sheet.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, e as readTask, h, f as Host, i
 import { c as createButtonActiveGesture } from './button-active-f6503382.js';
 import { r as raf } from './helpers-da915de8.js';
 import { c as createLockController } from './lock-controller-316928be.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-e7b9d6d9.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-dcc93658.js';
 import { g as getClassMap } from './theme-01f3f29c.js';
 import { b as getIonMode } from './ionic-global-c81d82ab.js';
 import { c as createAnimation } from './animation-eab5a4ca.js';

package/dist/esm/ion-alert.entry.js

@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
 import { c as createButtonActiveGesture } from './button-active-f6503382.js';
 import { r as raf } from './helpers-da915de8.js';
 import { c as createLockController } from './lock-controller-316928be.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-e7b9d6d9.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-dcc93658.js';
 import { g as getClassMap } from './theme-01f3f29c.js';
 import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
 import { c as createAnimation } from './animation-eab5a4ca.js';

package/dist/esm/ion-app_8.entry.js

@@ -61,7 +61,7 @@ const App = class {
                 if (typeof window !== 'undefined') {
                     import('./keyboard-52278bd7.js').then((module) => module.startKeyboardAssist(window));
                 }
-                import('./focus-visible-dd40d69f.js').then((module) => (this.focusVisible = module.startFocusVisible()));
+                import('./focus-visible-ab389174.js').then((module) => (this.focusVisible = module.startFocusVisible()));
             });
         }
     }

package/dist/esm/ion-datetime_3.entry.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, d as createEvent, w as writeTask, h, f as Host, i as getElement } from './index-28849c61.js';
-import { startFocusVisible } from './focus-visible-dd40d69f.js';
+import { startFocusVisible } from './focus-visible-ab389174.js';
 import { r as raf, d as renderHiddenInput, g as getElementRoot, j as clamp } from './helpers-da915de8.js';
 import { a as printIonError, p as printIonWarning } from './index-9b0d46f4.js';
 import { i as isRTL } from './dir-babeabeb.js';
@@ -11,7 +11,7 @@ import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSh
 import { b as getIonMode } from './ionic-global-c81d82ab.js';
 import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as convertToArrayOfNumbers, u as convertDataToISO, x as getToday, y as getClosestValidDate, z as generateMonths, A as getNumDaysInMonth, B as getCombinedDateColumnData, C as getMonthColumnData, D as getDayColumnData, E as getYearColumnData, F as isMonthFirstLocale, G as getTimeColumnsData, H as isLocaleDayPeriodRTL, I as getDaysOfWeek, J as getMonthAndYear, K as getDaysOfMonth, L as getHourCycle, M as getLocalizedTime, N as getLocalizedDateTime, O as formatValue, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-ae11fd43.js';
 import { c as createLockController } from './lock-controller-316928be.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-e7b9d6d9.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-dcc93658.js';
 import { c as createAnimation } from './animation-eab5a4ca.js';
 import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-ac164e4c.js';
 import './index-a5d50daf.js';

package/dist/esm/ion-loading.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, f as Host, i as getElement
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-49c88215.js';
 import { r as raf } from './helpers-da915de8.js';
 import { c as createLockController } from './lock-controller-316928be.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-e7b9d6d9.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-dcc93658.js';
 import { g as getClassMap } from './theme-01f3f29c.js';
 import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
 import { c as createAnimation } from './animation-eab5a4ca.js';