aloha-vue 1.2.282 → 1.2.284

package/CHANGELOG.md

@@ -7,6 +7,14 @@
 ---
 # Versions
 
+## 1.2.284
+
+- Improved `focus` management for the `AMenu2` component, ensuring better accessibility when the menu is closed.
+
+## 1.2.283
+
+- Fixed the `HTML` structure of the  component to improve accessibility and ensure compliance with accessibility standards.
+
 ## 1.2.282
 
 - Fixed the `ATable` component to ensure the `aria-labelledby` attribute is not used when the table has no header, improving accessibility compliance.

package/package.json

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

package/src/AMenu2/AMenu2.js

@@ -231,11 +231,19 @@ export default {
     } = ToggleAPI(props);
 
     const {
+      isDesktopSubMenuVisibleWhenMenuClosed,
       menuRef,
-      removeListenerForKeydown,
-      setListenerForKeydown,
+      removeListenerForKeydownDesktop,
+      removeListenerForKeydownMobile,
+      setListenerForKeydownDesktop,
+      setListenerForKeydownMobile,
     } = KeydownAPI(props, {
       closeMenu,
+      dataProParent,
+      isMenuOpen,
+      isSubMenuOpen,
+      panelParentsOpen,
+      togglePanel,
     });
 
     const {
@@ -262,7 +270,7 @@ export default {
       isMenuInitialized,
       isMobileWidth,
     } = ResizeAPI(props, {
-      removeListenerForKeydown,
+      removeListenerForKeydownMobile,
       toggleMenu,
     });
 
@@ -335,9 +343,9 @@ export default {
       closeAllPanels();
       if (newValue) {
         destroyPopover();
-        setListenerForKeydown();
+        setListenerForKeydownMobile();
       } else {
-        removeListenerForKeydown();
+        removeListenerForKeydownMobile();
       }
     });
 
@@ -347,6 +355,14 @@ export default {
       deep: true,
     });
 
+    watch(isDesktopSubMenuVisibleWhenMenuClosed, newValue => {
+      if (newValue) {
+        setListenerForKeydownDesktop();
+      } else {
+        removeListenerForKeydownDesktop();
+      }
+    });
+
     provide("activeRoutesIds", computed(() => activeRoutesIds.value));
     provide("clickMenuLink", clickMenuLink);
     provide("isLinkTruncated", computed(() => isLinkTruncated.value));
@@ -363,7 +379,8 @@ export default {
       removeBodyClasses();
       destroyEventBusUpdateViewOnResize();
       destroyPopover();
-      removeListenerForKeydown();
+      removeListenerForKeydownDesktop();
+      removeListenerForKeydownMobile();
     });
 
     return {

package/src/AMenu2/AMenuBreadcrumbs/AMenuBreadcrumbs.js

@@ -98,50 +98,56 @@ export default {
             "a_menu_2__breadcrumb__ul a_menu_2__breadcrumb__ul_truncated",
           ],
         }, [
-          this.breadcrumbsItemsDropdown.length > 0 && h(ADropdown, {
-            buttonClass: "a_btn a_btn_secondary a_btn_small a_menu_2__breadcrumb__ul_truncated__btn",
-            buttonIconLeft: "ThreeDots",
-            buttonTextScreenReader: "_A_MENU_2_BREADCRUMB_SHOW_BTN_",
-            buttonTitle: "_A_MENU_2_BREADCRUMB_SHOW_BTN_",
-            dropdownClass: "a_menu_2__breadcrumb__ul_truncated__dropdown",
-            hasCaret: false,
-            inBody: true,
-            ...this.breadcrumbsTruncatedDropdownProps,
-          }, {
-            dropdown: () => [
-              this.breadcrumbsItemsDropdown.map(breadcrumbsItem => {
-                const ATTR = breadcrumbsItem.panelParentId ?
-                  {
-                    tag: "a",
-                    class: [
-                      "a_menu_2__breadcrumbs__link",
-                      this.breadcrumbsLinkClass,
-                    ],
-                    role: "button",
-                    tabindex: 0,
-                    onClick: () => this.goBack({ parentId: breadcrumbsItem.panelParentId }),
-                    onKeydown: $event => this.goBackKeydown({ $event, parentId: breadcrumbsItem.panelParentId }),
-                  } :
-                  {
-                    class: "a_menu_2__breadcrumbs__link",
-                    tag: "strong",
-                  };
-                return h("li", {
-                  key: breadcrumbsItem.panelParentId,
-                  class: "a_menu_2__breadcrumbs__item",
-                }, [
-                  h(AButton, {
-                    text: breadcrumbsItem.label,
-                    title: breadcrumbsItem.label,
-                    ...ATTR,
+          this.breadcrumbsItemsDropdown.length > 0 ?
+            h("li", {
+              class: "a_menu_2__breadcrumbs__item",
+            }, [
+              h(ADropdown, {
+                buttonClass: "a_btn a_btn_secondary a_btn_small a_menu_2__breadcrumb__ul_truncated__btn",
+                buttonIconLeft: "ThreeDots",
+                buttonTextScreenReader: "_A_MENU_2_BREADCRUMB_SHOW_BTN_",
+                buttonTitle: "_A_MENU_2_BREADCRUMB_SHOW_BTN_",
+                dropdownClass: "a_menu_2__breadcrumb__ul_truncated__dropdown",
+                hasCaret: false,
+                inBody: true,
+                ...this.breadcrumbsTruncatedDropdownProps,
+              }, {
+                dropdown: () => [
+                  this.breadcrumbsItemsDropdown.map(breadcrumbsItem => {
+                    const ATTR = breadcrumbsItem.panelParentId ?
+                      {
+                        tag: "a",
+                        class: [
+                          "a_menu_2__breadcrumbs__link",
+                          this.breadcrumbsLinkClass,
+                        ],
+                        role: "button",
+                        tabindex: 0,
+                        onClick: () => this.goBack({ parentId: breadcrumbsItem.panelParentId }),
+                        onKeydown: $event => this.goBackKeydown({ $event, parentId: breadcrumbsItem.panelParentId }),
+                      } :
+                      {
+                        class: "a_menu_2__breadcrumbs__link",
+                        tag: "strong",
+                      };
+                    return h("li", {
+                      key: breadcrumbsItem.panelParentId,
+                      class: "a_menu_2__breadcrumbs__item",
+                    }, [
+                      h(AButton, {
+                        text: breadcrumbsItem.label,
+                        title: breadcrumbsItem.label,
+                        ...ATTR,
+                      }),
+                      h("span", {
+                        class: "a_menu_2__breadcrumbs__item__divider",
+                      }, "/"),
+                    ]);
                   }),
-                  h("span", {
-                    class: "a_menu_2__breadcrumbs__item__divider",
-                  }, "/"),
-                ]);
+                ],
               }),
-            ],
-          }),
+            ]) :
+            "",
           this.breadcrumbsItemsTruncated.map(breadcrumbsItem => {
             const ATTR = breadcrumbsItem.panelParentId ?
               {

package/src/AMenu2/AMenuPanelLink/AMenuPanelLink.js

@@ -105,9 +105,7 @@ export default {
 
     const {
       tabindex,
-    } = TabindexAPI(props, {
-      isLinkOpen,
-    });
+    } = TabindexAPI(props);
 
     const {
       countChildren,

package/src/AMenu2/AMenuPanelLink/compositionAPI/TabindexAPI.js

@@ -4,9 +4,7 @@ import {
   toRef,
 } from "vue";
 
-export default function TabindexAPI(props, {
-  isLinkOpen = computed(() => false),
-}) {
+export default function TabindexAPI(props) {
   const isLinkInSearchPanel = toRef(props, "isLinkInSearchPanel");
   const isPanelOpen = toRef(props, "isPanelOpen");
 
@@ -18,24 +16,18 @@ export default function TabindexAPI(props, {
     if (isLinkInSearchPanel.value) {
       return 0;
     }
-    if (!isMenuOpen.value) {
-      if (isPanelMain.value && isPanelOpen.value) {
-        return 0;
-      }
-      if (isPanelMain.value || isChildPanelOpen.value) {
-        if (isLinkOpen.value) {
-          return 0;
-        }
-        return -1;
-      }
-      if (isPanelOpen.value) {
-        return 0;
-      }
-      return -1;
+    if (isPanelMain.value) {
+      return 0;
     }
     if (isPanelOpen.value) {
       return 0;
     }
+    if (!isMenuOpen.value) {
+      if (isChildPanelOpen.value) {
+        return 0;
+      }
+    }
+
     return -1;
   });
 

package/src/AMenu2/compositionAPI/KeydownAPI.js

@@ -1,4 +1,5 @@
 import {
+  computed,
   ref,
   toRef,
 } from "vue";
@@ -6,13 +7,27 @@ import {
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
 
 import AKeysCode from "../../const/AKeysCode";
+import AKeyId from "../../const/AKeyId";
+import {
+  getElementId,
+} from "../utils/utils";
 import {
   focusableSelector,
 } from "../../const/AFocusableElements";
+import {
+  findIndex,
+  forEach,
+} from "lodash-es";
 
 export default function KeydownAPI(props, {
   closeMenu = () => {},
+  dataProParent = computed(() => ({})),
+  isMenuOpen = computed(() => false),
+  isSubMenuOpen = computed(() => false),
+  panelParentsOpen = ref([]),
+  togglePanel = () => {},
 }) {
+  const menuId = toRef(props, "menuId");
   const useEscapeForMobile = toRef(props, "useEscapeForMobile");
 
   const menuRef = ref(undefined);
@@ -21,6 +36,10 @@ export default function KeydownAPI(props, {
     isMobileWidth,
   } = AMobileAPI();
 
+  const isDesktopSubMenuVisibleWhenMenuClosed = computed(() => {
+    return !isMobileWidth.value && !isMenuOpen.value && isSubMenuOpen.value;
+  });
+
   const trapFocus = EVENT => {
     if (!menuRef.value) {
       return;
@@ -57,7 +76,7 @@ export default function KeydownAPI(props, {
     $event.stopPropagation();
   };
 
-  const keydown = $event => {
+  const keydownMobile = $event => {
     const EVENT = $event || window.$event;
     if (EVENT.key === "Escape" || EVENT.keyCode === AKeysCode.escape) {
       pressEscape($event);
@@ -66,20 +85,138 @@ export default function KeydownAPI(props, {
     }
   };
 
-  const setListenerForKeydown = () => {
+  const setFocusToLinkInPreviousSubPanel = ({ panelIndex, panelId }) => {
+    const LINK_HTML_ID = getElementId({
+      menuId: menuId.value,
+      id: panelId,
+      suffix: "link",
+    });
+    const LINK = document.getElementById(LINK_HTML_ID);
+    if (LINK) {
+      if (panelIndex > 0) {
+        const PANEL_PARENTS_OPEN_NEW = panelParentsOpen.value.slice(0, panelIndex);
+        togglePanel({ parentIds: PANEL_PARENTS_OPEN_NEW, withoutFocus: true });
+      }
+      LINK.focus();
+    }
+  };
+
+  const setFocusToLinkInNextSubPanel = ({ panelIndex }) => {
+    const PANEL_ID = panelParentsOpen.value[panelIndex + 1];
+    const PANEL_HTML_ID = getElementId({
+      menuId: menuId.value,
+      id: PANEL_ID,
+      suffix: "panel",
+    });
+    const LINKS = document.querySelectorAll(`#${ PANEL_HTML_ID } a.a_menu_2__link`);
+    if (LINKS.length) {
+      LINKS[0].focus();
+    }
+  };
+
+  const setFocusToParentLinkInMainPanel = ({ panelId }) => {
+    const LINK_ID = getElementId({
+      menuId: menuId.value,
+      id: panelId,
+      suffix: "link",
+    });
+    const LINK_ELEMENT = document.getElementById(LINK_ID);
+    if (LINK_ELEMENT) {
+      togglePanel({ parentIds: [], withoutFocus: true });
+      LINK_ELEMENT.focus();
+    }
+  };
+
+  const setFocusToNextParentLinkInMainPanel = ({ panelId }) => {
+    let linkNextId = panelId;
+    const INDEX_ACTIVE_LINK_IN_MAIN_PANEL = findIndex(dataProParent.value.main, [AKeyId, panelId]);
+    if (INDEX_ACTIVE_LINK_IN_MAIN_PANEL === -1) {
+      return;
+    }
+    if (INDEX_ACTIVE_LINK_IN_MAIN_PANEL !== dataProParent.value.main.length - 1) { // not last link
+      linkNextId = dataProParent.value.main?.[INDEX_ACTIVE_LINK_IN_MAIN_PANEL + 1]?.[AKeyId];
+    }
+
+    const LINK_ID = getElementId({
+      menuId: menuId.value,
+      id: linkNextId,
+      suffix: "link",
+    });
+    const LINK_ELEMENT = document.getElementById(LINK_ID);
+    if (LINK_ELEMENT) {
+      togglePanel({ parentIds: [], withoutFocus: true });
+      LINK_ELEMENT.focus();
+    }
+  };
+
+  const setFocus = ({ EVENT, PANEL_ELEMENT, panelIndex, panelId }) => {
+    const LINKS = PANEL_ELEMENT.querySelectorAll("a.a_menu_2__link");
+    if (EVENT.shiftKey) { // Shift + Tab
+      if (document.activeElement === LINKS[0]) {
+        if (panelIndex > 0) {
+          setFocusToLinkInPreviousSubPanel({ panelIndex, panelId });
+        } else {
+          setFocusToParentLinkInMainPanel({ panelId });
+        }
+        EVENT.preventDefault();
+      }
+    } else { // Tab
+      if (document.activeElement === LINKS[LINKS.length - 1]) {
+        if (panelIndex < panelParentsOpen.value.length - 1) {
+          setFocusToLinkInNextSubPanel({ panelIndex });
+        } else if (panelIndex > 0) {
+          setFocusToLinkInPreviousSubPanel({ panelIndex, panelId });
+        } else {
+          setFocusToNextParentLinkInMainPanel({ panelId });
+        }
+        EVENT.preventDefault();
+      }
+    }
+  };
+
+  const keydownDesktop = $event => {
+    const EVENT = $event || window.$event;
+    if (EVENT.key === "Tab" || EVENT.keyCode === AKeysCode.tab) {
+      forEach(panelParentsOpen.value, (panelId, panelIndex) => {
+        const PANEL_HTML_ID = getElementId({
+          menuId: menuId.value,
+          id: panelId,
+          suffix: "panel",
+        });
+        const PANEL_ELEMENT = document.getElementById(PANEL_HTML_ID);
+        if (PANEL_ELEMENT && PANEL_ELEMENT.contains(document.activeElement)) {
+          setFocus({ EVENT, PANEL_ELEMENT, panelIndex, panelId });
+
+          return false;
+        }
+      });
+    }
+  };
+
+  const setListenerForKeydownMobile = () => {
     if (isMobileWidth.value) {
-      document.addEventListener("keydown", keydown);
+      document.addEventListener("keydown", keydownMobile);
     }
   };
 
+  const removeListenerForKeydownMobile = () => {
+    document.removeEventListener("keydown", keydownMobile);
+  };
+
+  const setListenerForKeydownDesktop = () => {
+    document.addEventListener("keydown", keydownDesktop);
+  };
 
-  const removeListenerForKeydown = () => {
-    document.removeEventListener("keydown", keydown);
+  const removeListenerForKeydownDesktop = () => {
+    document.removeEventListener("keydown", keydownDesktop);
   };
 
   return {
+    isDesktopSubMenuVisibleWhenMenuClosed,
     menuRef,
-    removeListenerForKeydown,
-    setListenerForKeydown,
+    removeListenerForKeydownDesktop,
+    removeListenerForKeydownMobile,
+    setListenerForKeydownDesktop,
+    setListenerForKeydownMobile,
   };
 }

package/src/AMenu2/compositionAPI/PanelsAPI.js

@@ -38,7 +38,7 @@ export default function PanelsAPI(props, {
     resetSearch();
   };
 
-  const togglePanel = ({ parentIds, parentId, isLinkInSearchPanel }) => {
+  const togglePanel = ({ parentIds, parentId, isLinkInSearchPanel, withoutFocus }) => {
     if (parentIds) {
       panelParentsOpen.value = parentIds;
     } else {
@@ -50,10 +50,12 @@ export default function PanelsAPI(props, {
       panelParentsOpen.value = PANEL_PARENTS_OPEN;
     }
 
-    setFocusToFirstLinkInPanel({
-      menuId: menuId.value,
-      panelId: last(panelParentsOpen.value) || "",
-    });
+    if (!withoutFocus) {
+      setFocusToFirstLinkInPanel({
+        menuId: menuId.value,
+        panelId: last(panelParentsOpen.value) || "",
+      });
+    }
     resetSearch();
   };
 

package/src/AMenu2/compositionAPI/ResizeAPI.js

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