voyager-ionic-core 8.3.4 → 8.4.1

package/components/ion-menu.js

@@ -3,13 +3,13 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
-import { o as getPresentedOverlay, n as focusFirstDescendant, q as focusLastDescendant } from './overlays.js';
+import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays.js';
 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}";
@@ -211,13 +211,13 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             if (shouldClose) {
                 ev.preventDefault();
                 ev.stopPropagation();
-                this.close();
+                this.close(undefined, BACKDROP);
             }
         }
     }
     onKeydown(ev) {
         if (ev.key === 'Escape') {
-            this.close();
+            this.close(undefined, BACKDROP);
         }
     }
     /**
@@ -246,8 +246,8 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
      * Closes the menu. If the menu is already closed or it can't be closed,
      * it returns `false`.
      */
-    close(animated = true) {
-        return this.setOpen(false, animated);
+    close(animated = true, role) {
+        return this.setOpen(false, animated, role);
     }
     /**
      * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
@@ -260,8 +260,8 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
      * Opens or closes the button.
      * If the operation can't be completed successfully, it returns `false`.
      */
-    setOpen(shouldOpen, animated = true) {
-        return menuController._setOpen(this, shouldOpen, animated);
+    setOpen(shouldOpen, animated = true, role) {
+        return menuController._setOpen(this, shouldOpen, animated, role);
     }
     trapKeyboardFocus(ev, doc) {
         const target = ev.target;
@@ -299,12 +299,12 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             }
         }
     }
-    async _setOpen(shouldOpen, animated = true) {
+    async _setOpen(shouldOpen, animated = true, role) {
         // If the menu is disabled or it is currently being animated, let's do nothing
         if (!this._isActive() || this.isAnimating || shouldOpen === this._isOpen) {
             return false;
         }
-        this.beforeAnimation(shouldOpen);
+        this.beforeAnimation(shouldOpen, role);
         await this.loadAnimation();
         await this.startAnimation(shouldOpen, animated);
         /**
@@ -316,7 +316,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             this.operationCancelled = false;
             return false;
         }
-        this.afterAnimation(shouldOpen);
+        this.afterAnimation(shouldOpen, role);
         return true;
     }
     async loadAnimation() {
@@ -391,7 +391,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         return checkEdgeSide(window, detail.currentX, this.isEndSide, this.maxEdgeStart);
     }
     onWillStart() {
-        this.beforeAnimation(!this._isOpen);
+        this.beforeAnimation(!this._isOpen, GESTURE);
         return this.loadAnimation();
     }
     onStart() {
@@ -458,11 +458,27 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const playTo = this._isOpen ? !shouldComplete : shouldComplete;
         this.animation
             .easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
-            .onFinish(() => this.afterAnimation(shouldOpen), { oneTimeCallback: true })
+            .onFinish(() => this.afterAnimation(shouldOpen, GESTURE), { oneTimeCallback: true })
             .progressEnd(playTo ? 1 : 0, this._isOpen ? 1 - newStepValue : newStepValue, 300);
     }
-    beforeAnimation(shouldOpen) {
+    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);
@@ -500,10 +516,10 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             this.ionWillOpen.emit();
         }
         else {
-            this.ionWillClose.emit();
+            this.ionWillClose.emit({ role });
         }
     }
-    afterAnimation(isOpen) {
+    afterAnimation(isOpen, role) {
         var _a;
         // keep opening/closing the menu disabled for a touch more yet
         // only add listeners/css if it's enabled and isOpen
@@ -515,6 +531,16 @@ 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();
             /**
@@ -530,6 +556,7 @@ 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);
             /**
@@ -553,7 +580,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 this.animation.stop();
             }
             // emit close event
-            this.ionDidClose.emit();
+            this.ionDidClose.emit({ role });
             // undo focus trapping so multiple menus don't collide
             document.removeEventListener('focus', this.handleFocus, true);
         }
@@ -585,7 +612,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
              * If the menu is disabled then we should
              * forcibly close the menu even if it is open.
              */
-            this.afterAnimation(false);
+            this.afterAnimation(false, GESTURE);
         }
     }
     render() {
@@ -596,14 +623,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: '30c0c9bfb8973e4a6feb658f8c4ee8e362f464ed', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', 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: '34b0e5840906862cf1bc27207e089004b0402c56', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '2cd7e61a8c0987ca4b3f1f8b33cba7152f1275fe' })), h("ion-backdrop", { key: 'd190b1f9b66c76e276f27bfe074d3aab796180fb', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, 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" })));
     }
     get el() { return this; }
     static get watchers() { return {