accessible-menu - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## [1.0.0-beta.3](https://github.com/NickDJM/accessible-menu/compare/v1.0.0-beta.2...v1.0.0-beta.3) (2019-11-21)
+
+
+### Features
+
+* **menu:** add support for a-z keys ([ecf80f8](https://github.com/NickDJM/accessible-menu/commit/ecf80f81de33f1dcfd492e6e1dc062ff6105dc0d)), closes [#8](https://github.com/NickDJM/accessible-menu/issues/8)
+
+
+### Performance Improvements
+
+* **menu:** provide minified source files ([d690bad](https://github.com/NickDJM/accessible-menu/commit/d690badc5e1b693da853f3b47f9f9ea591d71a87)), closes [#31](https://github.com/NickDJM/accessible-menu/issues/31)
+
 ## [1.0.0-beta.2](https://github.com/NickDJM/accessible-menu/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2019-11-20)
@@ -7,0 +19,0 @@

dist/accessibleMenu.js

@@ -652,3 +652,7 @@ "use strict";
           var key = event.key,
-              code = event.code;
+              code = event.code,
+              altKey = event.altKey,
+              crtlKey = event.crtlKey,
+              metaKey = event.metaKey;
+          var modifier = altKey || crtlKey || metaKey;
 
@@ -701,2 +705,7 @@ if (_this5.currentFocus === "none") {
               _this5.focusLastChild();
+            } else if (key.match(/^[a-zA-Z]{1}$/) && !modifier) {
+              // The A-Z keys should focus the next menu item starting with that letter.
+              preventDefault(event);
+
+              _this5.focusNextChildWithCharacter(key);
             }
@@ -814,2 +823,30 @@ }
       /**
+       * Focus the menu's next child starting with a specific letter.
+       *
+       * @param {string} char - The character to look for.
+       */
+
+    }, {
+      key: "focusNextChildWithCharacter",
+      value: function focusNextChildWithCharacter(_char) {
+        // Ensure the character is lowercase just to be safe.
+        var match = _char.toLowerCase();
+
+        var index = this.focussedChild + 1;
+        var found = false;
+
+        while (!found && index < this.menuItems.length) {
+          // Ensure the text in the item is lowercase just to be safe.
+          var text = this.menuItems[index].element.innerText.toLowerCase(); // Focus the child if the text matches, otherwise move on.
+
+          if (text.startsWith(match)) {
+            found = true;
+            this.focussedChild = index;
+            this.focusCurrentChild();
+          }
+
+          index++;
+        }
+      }
+      /**
        * Close all submenu children.
@@ -959,2 +996,2 @@ */
   return Menu;
-}();
+}();

package.json

 {
   "name": "accessible-menu",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "A JavaScript library to help you generate WAI-ARIA accessible menus in the DOM.",
@@ -12,3 +12,5 @@ "main": "src/menu.js",
     "bundle": "npx rollup --config .rollup.config.js",
-    "build": "npm run bundle && npx babel dist -d dist"
+    "compile": "npx babel dist/accessibleMenu.js -o dist/accessibleMenu.js",
+    "minify": "npx terser dist/accessibleMenu.js -c -m -o dist/accessibleMenu.min.js",
+    "build": "npm run bundle && npm run compile && npm run minify"
   },
@@ -43,6 +45,6 @@ "repository": {
     "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.6.0",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsdoc": "^18.0.1",
+    "eslint-plugin-jsdoc": "^18.1.4",
     "eslint-plugin-node": "^10.0.0",
@@ -52,7 +54,8 @@ "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-standard": "^4.0.1",
-    "husky": "^3.0.9",
+    "husky": "^3.1.0",
     "prettier": "^1.19.1",
-    "rollup": "^1.27.0",
-    "standard-version": "^7.0.0"
+    "rollup": "^1.27.3",
+    "standard-version": "^7.0.1",
+    "terser": "^4.4.0"
   }
 }

src/menu.js

@@ -310,3 +310,4 @@ import MenuItem from "./menuItem";
     this.element.addEventListener("keydown", event => {
-      const { key, code } = event;
+      const { key, code, altKey, crtlKey, metaKey } = event;
+      const modifier = altKey || crtlKey || metaKey;
 
@@ -350,2 +351,6 @@ if (this.currentFocus === "none") {
           this.focusLastChild();
+        } else if (key.match(/^[a-zA-Z]{1}$/) && !modifier) {
+          // The A-Z keys should focus the next menu item starting with that letter.
+          preventDefault(event);
+          this.focusNextChildWithCharacter(key);
         }
@@ -447,2 +452,29 @@ }
   /**
+   * Focus the menu's next child starting with a specific letter.
+   *
+   * @param {string} char - The character to look for.
+   */
+  focusNextChildWithCharacter(char) {
+    // Ensure the character is lowercase just to be safe.
+    const match = char.toLowerCase();
+
+    let index = this.focussedChild + 1;
+    let found = false;
+
+    while (!found && index < this.menuItems.length) {
+      // Ensure the text in the item is lowercase just to be safe.
+      const text = this.menuItems[index].element.innerText.toLowerCase();
+
+      // Focus the child if the text matches, otherwise move on.
+      if (text.startsWith(match)) {
+        found = true;
+        this.focussedChild = index;
+        this.focusCurrentChild();
+      }
+
+      index++;
+    }
+  }
+
+  /**
    * Close all submenu children.
@@ -449,0 +481,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

86529

increased by19.49%

Number of package files

22

increased by4.76%

Lines of code

1719

increased by3.55%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes