aloha-vue 1.2.261 → 1.2.263

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.261",
+  "version": "1.2.263",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AMenu2/AMenu2.js

@@ -20,6 +20,7 @@ import AMenuBlockerClickAPI from "./compositionAPI/AMenuBlockerClickAPI";
 import BackdropAPI from "./compositionAPI/BackdropAPI";
 import CheckRoutesAPI from "./compositionAPI/CheckRoutesAPI";
 import DataAPI from "./compositionAPI/DataAPI";
+import KeydownAPI from "./compositionAPI/KeydownAPI";
 import LinkClickAPI from "./compositionAPI/LinkClickAPI";
 import MenuAttributesAPI from "./compositionAPI/MenuAttributesAPI";
 import PanelMainAPI from "./compositionAPI/PanelMainAPI";
@@ -183,12 +184,23 @@ export default {
       required: false,
       default: true,
     },
+    useEscapeForMobile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   setup(props) {
     const isLinkTruncated = toRef(props, "isLinkTruncated");
     const showCountChildren = toRef(props, "showCountChildren");
     const breadcrumbsTruncatedOffset = toRef(props, "breadcrumbsTruncatedOffset");
 
+    const {
+      menuRef,
+      removeListenerForKeydown,
+      setListenerForKeydown,
+    } = KeydownAPI(props);
+
     const {
       dataKeyById,
       dataProParent,
@@ -221,7 +233,10 @@ export default {
       isMenuOpen,
       removeBodyClasses,
       toggleMenu,
-    } = ToggleAPI(props);
+    } = ToggleAPI(props, {
+      removeListenerForKeydown,
+      setListenerForKeydown,
+    });
 
     const {
       clickOnSearchBtn,
@@ -233,6 +248,8 @@ export default {
 
     const {
       attributesMenuClick,
+      attributesMobile,
+      headerId,
     } = MenuAttributesAPI(props, {
       isMenuOpen,
       toggleMenu,
@@ -245,6 +262,7 @@ export default {
       isMenuInitialized,
       isMobileWidth,
     } = ResizeAPI(props, {
+      removeListenerForKeydown,
       toggleMenu,
     });
 
@@ -279,9 +297,9 @@ export default {
 
     const {
       destroyPopover,
-      menuRef,
       startPopper,
     } = PopoverAPI(props, {
+      menuRef,
       isMenuOpen,
       panelParentsOpen,
     });
@@ -317,6 +335,9 @@ export default {
       closeAllPanels();
       if (newValue) {
         destroyPopover();
+        setListenerForKeydown();
+      } else {
+        removeListenerForKeydown();
       }
     });
 
@@ -342,17 +363,20 @@ export default {
       removeBodyClasses();
       destroyEventBusUpdateViewOnResize();
       destroyPopover();
+      removeListenerForKeydown();
     });
 
     return {
       activeRoutesIds,
       attributesBlockerClick,
       attributesMenuClick,
+      attributesMobile,
       checkAllRoutes,
       clickAttributesBackdrop,
       clickOnSearchBtn,
       dataKeyById,
       dataProParent,
+      headerId,
       isBackdropVisible,
       isLeastOnePanelOpenAndMenuClosed,
       isMenuOpen,
@@ -377,6 +401,7 @@ export default {
     return h("nav", {
       ref: "menuRef",
       id: this.menuId,
+      "aria-labelledby": this.headerId,
       class: [
         "a_menu_2",
         {
@@ -386,6 +411,7 @@ export default {
           a_menu_2_mobile: this.isMobileWidth,
         },
       ],
+      ...this.attributesMobile,
       ...this.attributesMenuClick,
     }, [
       h("div", {
@@ -415,6 +441,7 @@ export default {
           class: "a_menu_2__navbar_top_sub",
         }, [
           h(ATranslation, {
+            id: this.headerId,
             class: "a_menu_2__navbar_top_sub__text",
             tag: "strong",
             text: "_A_MENU_2_MAIN_MENU_",

package/src/AMenu2/compositionAPI/KeydownAPI.js

@@ -0,0 +1,83 @@
+import {
+  ref,
+  toRef,
+} from "vue";
+
+import AMobileAPI from "../../compositionAPI/AMobileAPI";
+
+import AKeysCode from "../../const/AKeysCode";
+import {
+  focusableSelector,
+} from "../../const/AFocusableElements";
+
+export default function KeydownAPI(props) {
+  const useEscapeForMobile = toRef(props, "useEscapeForMobile");
+
+  const menuRef = ref(undefined);
+
+  const {
+    isMobileWidth,
+  } = AMobileAPI();
+
+  const trapFocus = EVENT => {
+    if (!menuRef.value) {
+      return;
+    }
+
+    const FOCUSABLE_ELEMENTS = menuRef.value.querySelectorAll(focusableSelector);
+    if (FOCUSABLE_ELEMENTS.length === 0) {
+      EVENT.preventDefault();
+      return;
+    }
+
+    const FIRST_FOCUSABLE_ELEMENT = FOCUSABLE_ELEMENTS[0];
+    const LAST_FOCUSABLE_ELEMENT = FOCUSABLE_ELEMENTS[FOCUSABLE_ELEMENTS.length - 1];
+    if (EVENT.shiftKey) { // Shift + Tab
+      if (document.activeElement === FIRST_FOCUSABLE_ELEMENT) {
+        LAST_FOCUSABLE_ELEMENT.focus();
+        EVENT.preventDefault();
+      }
+    } else { // Tab
+      if (document.activeElement === LAST_FOCUSABLE_ELEMENT) {
+        FIRST_FOCUSABLE_ELEMENT.focus();
+        EVENT.preventDefault();
+      }
+    }
+  };
+
+  const pressEscape = $event => {
+    if (!useEscapeForMobile.value) {
+      return;
+    }
+
+    close.value();
+    $event.preventDefault();
+    $event.stopPropagation();
+  };
+
+  const keydown = $event => {
+    const EVENT = $event || window.$event;
+    if (EVENT.key === "Escape" || EVENT.keyCode === AKeysCode.escape) {
+      pressEscape($event);
+    } else if (EVENT.key === "Tab" || EVENT.keyCode === AKeysCode.tab) {
+      trapFocus(EVENT);
+    }
+  };
+
+  const setListenerForKeydown = () => {
+    if (isMobileWidth.value) {
+      document.addEventListener("keydown", keydown);
+    }
+  };
+
+
+  const removeListenerForKeydown = () => {
+    document.removeEventListener("keydown", keydown);
+  };
+
+  return {
+    menuRef,
+    removeListenerForKeydown,
+    setListenerForKeydown,
+  };
+}

package/src/AMenu2/compositionAPI/MenuAttributesAPI.js

@@ -4,11 +4,33 @@ import {
   toRef,
 } from "vue";
 
+import AMobileAPI from "../../compositionAPI/AMobileAPI";
+
 export default function MenuAttributesAPI(props, {
   isMenuOpen = ref(false),
   toggleMenu = () => {},
 }) {
   const isBlockerClickable = toRef(props, "isBlockerClickable");
+  const menuId = toRef(props, "menuId");
+
+  const {
+    isMobileWidth,
+  } = AMobileAPI();
+
+  const attributesMobile = computed(() => {
+    if (isMobileWidth.value) {
+      return {
+        role: "dialog",
+        ariaModal: true,
+      };
+    }
+
+    return {};
+  });
+
+  const headerId = computed(() => {
+    return `${ menuId.value }_header`;
+  });
 
   const attributesMenuClick = computed(() => {
     const ATTRIBUTES = {};
@@ -22,5 +44,7 @@ export default function MenuAttributesAPI(props, {
 
   return {
     attributesMenuClick,
+    attributesMobile,
+    headerId,
   };
 }

package/src/AMenu2/compositionAPI/PopoverAPI.js

@@ -20,13 +20,13 @@ import {
 } from "lodash-es";
 
 export default function PopoverAPI(props, {
+  menuRef = ref(undefined),
   isMenuOpen = computed(() => false),
   panelParentsOpen = ref([]),
 }) {
   const menuId = toRef(props, "menuId");
 
   const cleanupPopper = ref({});
-  const menuRef = ref(undefined);
   const isEventCloseClickStarted = ref(false);
 
   const getElementLink = ({ id }) => {
@@ -133,7 +133,6 @@ export default function PopoverAPI(props, {
 
   return {
     destroyPopover,
-    menuRef,
     startPopper,
   };
 }

package/src/AMenu2/compositionAPI/ResizeAPI.js

@@ -8,7 +8,8 @@ import AMobileAPI from "../../compositionAPI/AMobileAPI";
 import EventBus from "../../utils/EventBus";
 
 export default function ResizeAPI(props, {
-  toggleMenu,
+  removeListenerForKeydown = () => {},
+  toggleMenu = () => {},
 }) {
   const isMenuOpenInitial = toRef(props, "isMenuOpenInitial");
 
@@ -23,6 +24,7 @@ export default function ResizeAPI(props, {
       toggleMenu({ isOpen: false });
     } else {
       toggleMenu({ isOpen: isMenuOpenInitial.value });
+      removeListenerForKeydown();
     }
   };