accessible-menu - npm Package Compare versions

Comparing version 1.0.0-beta.0 to 1.0.0-beta.1

.eslintrc.js

@@ -21,3 +21,10 @@ module.exports = {
   },
-  rules: {}
+  rules: {
+    "no-console": [
+      "warn",
+      {
+        allow: ["warn", "error"]
+      }
+    ]
+  }
 };

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## [1.0.0-beta.1](https://github.com/NickDJM/accessible-menu/compare/v1.0.0-beta.0...v1.0.0-beta.1) (2019-11-18)
+
+
+### Bug Fixes
+
+* **menu:** remove tab capturing from menus ([012e458](https://github.com/NickDJM/accessible-menu/commit/012e458000441088e57775da6860963e55f2fa15)), closes [#19](https://github.com/NickDJM/accessible-menu/issues/19)
+
+
+### Code Refactoring
+
+* **menu:** adjust keybindings to properly follow spec ([df3db91](https://github.com/NickDJM/accessible-menu/commit/df3db91c8227bb6f0ad3d5f13006b65bec4f96da)), closes [#21](https://github.com/NickDJM/accessible-menu/issues/21)
+
 ## [1.0.0-beta.0](https://github.com/NickDJM/accessible-menu/compare/v1.0.0-alpha.1...v1.0.0-beta.0) (2019-11-17)
@@ -7,0 +19,0 @@

dist/accessibleMenu.js

@@ -74,2 +74,3 @@ var AccessibleMenu = (function () {
      * @param {MenuItem} parentMenuItem    - The menu item containing the toggle.
+     * @param {Menu}     rootMenu          - The root menu containing the toggle.
      */
@@ -81,3 +82,4 @@ constructor(
       parentMenu = null,
-      parentMenuItem = null
+      parentMenuItem = null,
+      rootMenu = null
     ) {
@@ -89,4 +91,5 @@ this.domElements = {
         menuItem: parentMenuItem,
-        menu,
-        parentMenu
+        menu: menu,
+        parentMenu: parentMenu,
+        rootMenu: rootMenu || parentMenu
       };
@@ -155,2 +158,11 @@ this.openClass = openClass;
     /**
+     * The root menu containing the toggle.
+     *
+     * @returns {Menu} - The root menu element.
+     */
+    get rootMenu() {
+      return this.elements.rootMenu;
+    }
+
+    /**
      * The open state on the menu.
@@ -278,4 +290,30 @@ *
           this.close();
+        } else if (this.parentMenu.isTopLevel && key === "ArrowRight") {
+          // The Right Arrow key should focus the next menu item in the parent menu.
+          preventDefault(event);
+          this.close();
+          this.parentMenu.focusNextChild();
+        } else if (this.parentMenu.isTopLevel && key === "ArrowLeft") {
+          // The Left Arrow key should focus the next menu item in the parent menu.
+          preventDefault(event);
+          this.close();
+          this.parentMenu.focusPreviousChild();
         }
       });
+      this.menuItem.element.addEventListener("keydown", event => {
+        const { key } = event;
+
+        if (this.menu.currentFocus === "none" && this.parentMenu.isTopLevel) {
+          if (key === "ArrowUp") {
+            // The Up Arrow key should open the submenu and select the last child.
+            preventDefault(event);
+            this.open();
+            this.menu.focusLastChild();
+          } else if (key === "ArrowDown") {
+            // The Down Arrow key should open the submenu and select the first child.
+            preventDefault(event);
+            this.open();
+          }
+        }
+      });
     }
@@ -288,8 +326,9 @@ }
      *
-     * @param {object} menuElement           - The menu element in the DOM.
-     * @param {string} menuItemSelector      - The selector string for menu items.
-     * @param {string} submenuItemSelector   - The selector string for submenu items.
-     * @param {string} submenuToggleSelector - The selector string for submenu toggle triggers.
-     * @param {string} submenuSelector       - The selector string for the submenu itself.
-     * @param {string} submenuOpenClass      - The class to use when a submenu is open.
+     * @param {object}  menuElement           - The menu element in the DOM.
+     * @param {string}  menuItemSelector      - The selector string for menu items.
+     * @param {string}  submenuItemSelector   - The selector string for submenu items.
+     * @param {string}  submenuToggleSelector - The selector string for submenu toggle triggers.
+     * @param {string}  submenuSelector       - The selector string for the submenu itself.
+     * @param {string}  submenuOpenClass      - The class to use when a submenu is open.
+     * @param {boolean} isTopLevel            - Flags the menu as a top-level menu.
      */
@@ -302,3 +341,4 @@ constructor(
       submenuSelector,
-      submenuOpenClass = "show"
+      submenuOpenClass = "show",
+      isTopLevel = true
     ) {
@@ -327,2 +367,3 @@ this.domElements = {
       this.openClass = submenuOpenClass;
+      this.root = isTopLevel;
     }
@@ -419,2 +460,11 @@
     /**
+     * The flag to mark as a top-level menu.
+     *
+     * @returns {boolean} - The top-level flag.
+     */
+    get isTopLevel() {
+      return this.root;
+    }
+
+    /**
      * Set the focus state of the menu.
@@ -447,2 +497,10 @@ *
 
+    set isTopLevel(value) {
+      if (typeof value !== "boolean") {
+        throw new TypeError("Top-level flag must be true or false.");
+      }
+
+      this.root = value;
+    }
+
     /**
@@ -477,3 +535,4 @@ * Creates and initializes all menu items.
             this.selector.submenu,
-            this.openClass
+            this.openClass,
+            false
           );
@@ -513,3 +572,3 @@ menu.initialize();
       this.element.addEventListener("keydown", event => {
-        const { key, code, shiftKey } = event;
+        const { key, code } = event;
 
@@ -529,9 +588,17 @@ if (this.currentFocus === "none") {
             this.currentFocus = "none";
-          } else if (key === "ArrowDown" || (key === "Tab" && !shiftKey)) {
-            // The Down Arrow and Tab keys should focus the next menu item.
+          } else if (!this.isTopLevel && key === "ArrowUp") {
+            // The Up Arrow key should focus the previous menu item in submenus.
             preventDefault(event);
+            this.focusPreviousChild();
+          } else if (this.isTopLevel && key === "ArrowRight") {
+            // The Right Arrow key should focus the next menu item.
+            preventDefault(event);
             this.focusNextChild();
-          } else if (key === "ArrowUp" || (key === "Tab" && shiftKey)) {
-            // The Up Arrow and Shift + Tab keys should focus the previous menu item.
+          } else if (!this.isTopLevel && key === "ArrowDown") {
+            // The Down Arrow key should focus the next item in submenus.
             preventDefault(event);
+            this.focusNextChild();
+          } else if (this.isTopLevel && key === "ArrowLeft") {
+            // The Left Arrow key should focus the previous menu item.
+            preventDefault(event);
             this.focusPreviousChild();
@@ -548,2 +615,10 @@ } else if (key === "Home") {
         }
+
+        if (this.currentFocus !== "none") {
+          if (key === "Tab") {
+            // The Tab key should select the next element outside of the menu.
+            this.blur();
+            this.closeChildren();
+          }
+        }
       });
@@ -550,0 +625,0 @@ }

package.json

 {
   "name": "accessible-menu",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "A JavaScript library to help you generate WAI-ARIA accessible menus in the DOM.",
@@ -5,0 +5,0 @@ "main": "src/menu.js",

src/menu.js

@@ -8,8 +8,9 @@ import MenuItem from "./menuItem";
    *
-   * @param {object} menuElement           - The menu element in the DOM.
-   * @param {string} menuItemSelector      - The selector string for menu items.
-   * @param {string} submenuItemSelector   - The selector string for submenu items.
-   * @param {string} submenuToggleSelector - The selector string for submenu toggle triggers.
-   * @param {string} submenuSelector       - The selector string for the submenu itself.
-   * @param {string} submenuOpenClass      - The class to use when a submenu is open.
+   * @param {object}  menuElement           - The menu element in the DOM.
+   * @param {string}  menuItemSelector      - The selector string for menu items.
+   * @param {string}  submenuItemSelector   - The selector string for submenu items.
+   * @param {string}  submenuToggleSelector - The selector string for submenu toggle triggers.
+   * @param {string}  submenuSelector       - The selector string for the submenu itself.
+   * @param {string}  submenuOpenClass      - The class to use when a submenu is open.
+   * @param {boolean} isTopLevel            - Flags the menu as a top-level menu.
    */
@@ -22,3 +23,4 @@ constructor(
     submenuSelector,
-    submenuOpenClass = "show"
+    submenuOpenClass = "show",
+    isTopLevel = true
   ) {
@@ -47,2 +49,3 @@ this.domElements = {
     this.openClass = submenuOpenClass;
+    this.root = isTopLevel;
   }
@@ -139,2 +142,11 @@
   /**
+   * The flag to mark as a top-level menu.
+   *
+   * @returns {boolean} - The top-level flag.
+   */
+  get isTopLevel() {
+    return this.root;
+  }
+
+  /**
    * Set the focus state of the menu.
@@ -167,2 +179,10 @@ *
 
+  set isTopLevel(value) {
+    if (typeof value !== "boolean") {
+      throw new TypeError("Top-level flag must be true or false.");
+    }
+
+    this.root = value;
+  }
+
   /**
@@ -197,3 +217,4 @@ * Creates and initializes all menu items.
           this.selector.submenu,
-          this.openClass
+          this.openClass,
+          false
         );
@@ -233,3 +254,3 @@ menu.initialize();
     this.element.addEventListener("keydown", event => {
-      const { key, code, shiftKey } = event;
+      const { key, code } = event;
 
@@ -249,9 +270,17 @@ if (this.currentFocus === "none") {
           this.currentFocus = "none";
-        } else if (key === "ArrowDown" || (key === "Tab" && !shiftKey)) {
-          // The Down Arrow and Tab keys should focus the next menu item.
+        } else if (!this.isTopLevel && key === "ArrowUp") {
+          // The Up Arrow key should focus the previous menu item in submenus.
           preventDefault(event);
+          this.focusPreviousChild();
+        } else if (this.isTopLevel && key === "ArrowRight") {
+          // The Right Arrow key should focus the next menu item.
+          preventDefault(event);
           this.focusNextChild();
-        } else if (key === "ArrowUp" || (key === "Tab" && shiftKey)) {
-          // The Up Arrow and Shift + Tab keys should focus the previous menu item.
+        } else if (!this.isTopLevel && key === "ArrowDown") {
+          // The Down Arrow key should focus the next item in submenus.
           preventDefault(event);
+          this.focusNextChild();
+        } else if (this.isTopLevel && key === "ArrowLeft") {
+          // The Left Arrow key should focus the previous menu item.
+          preventDefault(event);
           this.focusPreviousChild();
@@ -268,2 +297,10 @@ } else if (key === "Home") {
       }
+
+      if (this.currentFocus !== "none") {
+        if (key === "Tab") {
+          // The Tab key should select the next element outside of the menu.
+          this.blur();
+          this.closeChildren();
+        }
+      }
     });
@@ -270,0 +307,0 @@ }

src/menuToggle.js

@@ -13,2 +13,3 @@ import Menu from "./menu";
    * @param {MenuItem} parentMenuItem    - The menu item containing the toggle.
+   * @param {Menu}     rootMenu          - The root menu containing the toggle.
    */
@@ -20,3 +21,4 @@ constructor(
     parentMenu = null,
-    parentMenuItem = null
+    parentMenuItem = null,
+    rootMenu = null
   ) {
@@ -28,4 +30,5 @@ this.domElements = {
       menuItem: parentMenuItem,
-      menu,
-      parentMenu
+      menu: menu,
+      parentMenu: parentMenu,
+      rootMenu: rootMenu || parentMenu
     };
@@ -94,2 +97,11 @@ this.openClass = openClass;
   /**
+   * The root menu containing the toggle.
+   *
+   * @returns {Menu} - The root menu element.
+   */
+  get rootMenu() {
+    return this.elements.rootMenu;
+  }
+
+  /**
    * The open state on the menu.
@@ -217,4 +229,30 @@ *
         this.close();
+      } else if (this.parentMenu.isTopLevel && key === "ArrowRight") {
+        // The Right Arrow key should focus the next menu item in the parent menu.
+        preventDefault(event);
+        this.close();
+        this.parentMenu.focusNextChild();
+      } else if (this.parentMenu.isTopLevel && key === "ArrowLeft") {
+        // The Left Arrow key should focus the next menu item in the parent menu.
+        preventDefault(event);
+        this.close();
+        this.parentMenu.focusPreviousChild();
       }
     });
+    this.menuItem.element.addEventListener("keydown", event => {
+      const { key } = event;
+
+      if (this.menu.currentFocus === "none" && this.parentMenu.isTopLevel) {
+        if (key === "ArrowUp") {
+          // The Up Arrow key should open the submenu and select the last child.
+          preventDefault(event);
+          this.open();
+          this.menu.focusLastChild();
+        } else if (key === "ArrowDown") {
+          // The Down Arrow key should open the submenu and select the first child.
+          preventDefault(event);
+          this.open();
+        }
+      }
+    });
   }
@@ -221,0 +259,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52838

increased by12.23%

Lines of code

1310

increased by12.45%

No dependency changes