adding support for keyboard accessibility

minor fixes
add lint-staged

Author: prabhuignoto

package.json

@@ -22,14 +22,17 @@
     "build": "vite build",
     "rollup": "rimraf ./dist && rollup -c",
     "lint": "eslint src/**/*.vue",
-    "lint:css": "stylelint src/**/*.vue"
+    "lint:css": "stylelint src/**/*.scss"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint:css",
-      "pre-push": "yarn lint"
+      "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "src/**/*.scss": ["stylelint src/**/*.scss", "git add"],
+    "src/**/*.vue": ["eslint src/**/*.vue", "git add"]
+  },
   "dependencies": {
     "nanoid": "^3.1.12",
     "vue": "^3.0.0",
@@ -47,6 +50,7 @@
     "eslint": "^7.10.0",
     "eslint-plugin-vue": "^7.0.0-beta.4",
     "husky": "^4.3.0",
+    "lint-staged": "^10.4.0",
     "rollup": "^2.28.1",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",

src/components/Menu.scss

@@ -9,10 +9,11 @@ $shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px 2px;
   height: 100%;
   justify-content: flex-start;
   width: 100%;
+  outline: 0;
 }
 
 .sub-menu-wrapper {
-  animation: show 0.2s ease-in;
+  animation: show 0.1s ease-in;
   border-radius: 0.5rem;
   box-shadow: $shadow;
   left: 102%;
@@ -76,6 +77,10 @@ $shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px 2px;
     color: $black;
   }
 
+  &.highlight {
+    border: 1px solid red;
+  }
+
   &.flip {
     .name {
       margin-left: auto;

src/components/Menu.vue

@@ -1,37 +1,48 @@
 <template>
   <div
+    ref="menuRef"
     class="menu-wrapper"
+    tabindex="0"
+    @keyup="handleKeyUp"
   >
     <ul
       class="menu-list"
       :style="getTheme"
     >
       <li
-        v-for="item of menuItems"
-        :key="item.id"
-        :class="[{ selected: item.selected, flip }, 'menu-list-item']"
+        v-for="({ id, selected, name, subMenu, showSubMenu },
+                index) of menuItems"
+        :key="id"
+        :class="[
+          { selected: selected, flip, 'sub-menu': subMenu },
+          'menu-list-item',
+        ]"
         :style="getTheme"
-        @mousedown="
-          handleMenuItemClick($event, item.id, item.name, item.subMenu)
-        "
+        @mousedown="handleMenuItemClick($event, id, name, subMenu, index)"
       >
-        <span class="name">{{ item.name }}</span>
         <span
-          v-if="item.subMenu"
-          class="chev-icon" 
+          class="name"
+          @click="$event.stopPropagation()"
+        >{{ name }}</span>
+        <span
+          v-if="subMenu"
+          class="chev-icon"
+          @click="$event.stopPropagation()"
         >
           <ChevRightIcon />
         </span>
         <span
-          v-if="item.subMenu && item.showSubMenu"
+          v-if="subMenu && showSubMenu"
           class="sub-menu-wrapper"
           :style="getTheme"
         >
           <component
             :is="SubMenuComponent"
-            :data="item.subMenu.items"
+            :data="subMenu.items"
             :on-selection="onSelection"
             :theme="theme"
+            :on-close="handleSubmenuClose"
+            :flip="flip"
           />
         </span>
       </li>
@@ -46,21 +57,13 @@ import {
   ref,
   resolveComponent,
   computed,
+  onMounted,
+  watch,
+  nextTick,
 } from "vue";
 import { nanoid } from "nanoid";
 import ChevRightIcon from "./icons/ChevRightIcon.vue";
-
-export type Menu = {
-  items: MenuItem[];
-};
-
-export type MenuItem = {
-  name: string;
-  subMenu?: Menu;
-  id?: string;
-  showSubMenu?: boolean;
-  selected?: boolean;
-};
+import { MenuItem } from "./types";
 
 export default defineComponent({
   name: "Menu",
@@ -80,6 +83,11 @@ export default defineComponent({
       type: Function as PropType<(name: string, parent?: string) => void>,
       default: null,
     },
+    onClose: {
+      type: Function as PropType<(keyCodeUsed?: number) => void>,
+      default: null,
+      required: true,
+    },
     theme: {
       type: Object as PropType<{
         primary: string;
@@ -97,6 +105,10 @@ export default defineComponent({
     },
   },
   setup(props) {
+    // tracks the index of the selected menu item
+    const activeIndex = ref(-1);
+
+    // gene unique ids for the menu items
     const menuItems = ref<MenuItem[]>(
       props.data.map((item) =>
         Object.assign({}, item, {
@@ -106,47 +118,161 @@ export default defineComponent({
       )
     );
 
+    // reference to the menu itself
+    const menuRef = ref<HTMLElement>();
+
+    // resolve this component for usage innested menus
     const SubMenuComponent = resolveComponent("Menu");
 
+    const selectMenuItem = (
+      id: string,
+      name: string,
+      subMenu?: boolean,
+      selectFirstItem?: boolean
+    ) => {
+      if (!subMenu) {
+        props.onSelection && props.onSelection(name);
+      } else {
+        expandMenu(id, selectFirstItem);
+      }
+    };
+
+    // expands the submenu
+    const expandMenu = (id: string, selectFirstItem?: boolean) => {
+      menuItems.value = menuItems.value.map((item) =>
+        Object.assign({}, item, {
+          showSubMenu: item.id === id,
+          subMenu:
+            selectFirstItem && item.id === id
+              ? {
+                  items: item.subMenu?.items.map((x, index) =>
+                    Object.assign({}, x, {
+                      selected: index === 0,
+                    })
+                  ),
+                }
+              : item.subMenu,
+        })
+      );
+    };
+
     const handleMenuItemClick = (
       event: MouseEvent,
       id: string,
       name: string,
-      subMenu: boolean
+      subMenu: boolean,
+      index: number
     ) => {
       event.stopPropagation();
       event.preventDefault();
 
-      menuItems.value = menuItems.value.map((item) => {
-        const active = item.id === id && item.subMenu && !item.selected;
-        return Object.assign({}, item, {
-          showSubMenu: active,
-          selected: active,
-        });
-      });
+      activeIndex.value = index;
 
-      if (!subMenu) {
-        props.onSelection && props.onSelection(name);
-      }
+      selectMenuItem(id, name, subMenu, false);
     };
 
+    // gets theme colors
     const getTheme = computed(() => ({
       "--background": props.theme.primary,
       "--menu-background": props.theme.menuBgColor,
       "--menu-text-color": props.theme.textColor,
       "--text-selected-color": props.theme.textSelectedColor,
     }));
 
+    // life cycle mount
+    onMounted(() => {
+      // focus the menu on mount
+      menuRef.value?.focus();
+
+      // reset the activeindex to 0, if first item is already selected.
+      // this is mostly the case while navigating via keyboard
+      nextTick(() => {
+        const isFirstItemSelected = props.data[0].selected;
+        if (isFirstItemSelected) {
+          activeIndex.value = 0;
+        }
+      });
+    });
+
+    // keyboard nav handler
+    const handleKeyUp = (event: KeyboardEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const actvIndex = activeIndex.value;
+
+      // get the active item
+      const item = menuItems.value[actvIndex > -1 ? actvIndex : 0];
+      const keyCode = event.keyCode;
+
+      // handle down arrow
+      if (keyCode === 40) {
+        if (actvIndex < props.data.length - 1) {
+          activeIndex.value += 1;
+        }
+        // handle up arrow
+      } else if (keyCode === 38) {
+        if (actvIndex > 0) {
+          activeIndex.value -= 1;
+        }
+        // handle left arrow
+      } else if (keyCode === 37) {
+        if (!props.flip) {
+          props.onClose(keyCode);
+        } else {
+          item && item.id && item.subMenu && expandMenu(item.id, true);
+        }
+        // handle enter
+      } else if (keyCode === 13) {
+        if (item && item.subMenu && item.id) {
+          expandMenu(item.id, true);
+        } else if (item.id) {
+          selectMenuItem(item.id, item.name, !!item.subMenu);
+        }
+        // handle right arrow
+      } else if (keyCode === 39) {
+        if (!props.flip) {
+          if (item && item.id && item.subMenu) {
+            expandMenu(item.id, true);
+          }
+        } else {
+          props.onClose(keyCode);
+        }
+      } else if (keyCode === 27) {
+        props.onClose();
+      }
+    };
+
+    const handleSubmenuClose = () => {
+      menuItems.value = menuItems.value.map((item) => {
+        return Object.assign({}, item, {
+          showSubMenu: false,
+        });
+      });
+      menuRef.value?.focus();
+    };
+
+    watch(activeIndex, (val) => {
+      menuItems.value = menuItems.value.map((item, index) => {
+        return Object.assign({}, item, {
+          selected: index === val,
+        });
+      });
+    });
+
     return {
       menuItems,
       handleMenuItemClick,
       SubMenuComponent,
       getTheme,
+      menuRef,
+      handleKeyUp,
+      activeIndex,
+      handleSubmenuClose,
     };
   },
 });
 </script>
 
 
 <style lang="scss" scoped src="./Menu.scss">
-</style>
+</style>handleBlur

src/components/index.scss

@@ -2,6 +2,7 @@ $cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
 .menu-head-wrapper {
   position: fixed;
+  // z-index: 9999;
 
   &:not(.dragActive) {
     transition: left 0.2s $cubic, right 0.2s $cubic, top 0.2s $cubic, bottom 0.2s $cubic;
@@ -25,7 +26,7 @@ $cubic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 }
 
-.icon {
+.menu-head-icon {
   align-items: center;
   color: #fff;
   display: flex;