accessible-menu - npm Package Compare versions

Comparing version 3.0.5 to 4.0.0-beta.0

index.js

 import DisclosureMenu from "./src/disclosureMenu.js";
 import Menubar from "./src/menubar.js";
+import TopLinkDisclosureMenu from "./src/topLinkDisclosureMenu.js";
 import Treeview from "./src/treeview.js";
@@ -7,2 +8,3 @@
 const menubar = Menubar;
+const topLinkDisclosureMenu = TopLinkDisclosureMenu;
 const treeview = Treeview;
@@ -12,2 +14,3 @@
 export { menubar as Menubar };
+export { topLinkDisclosureMenu as TopLinkDisclosureMenu };
 export { treeview as Treeview };
@@ -17,3 +20,4 @@ export default {
   Menubar,
+  TopLinkDisclosureMenu,
   Treeview,
 };

package.json

 {
   "name": "accessible-menu",
-  "version": "3.0.5",
+  "version": "4.0.0-beta.0",
   "description": "A JavaScript library to help you generate WCAG accessible menus in the DOM.",
@@ -17,8 +17,16 @@ "main": "index.js",
     "prettier": "prettier '**/*.js' --ignore-path .eslintignore",
-    "prerelease": "npm run lint && npm run build && npm test",
+    "prerelease": "npm run lint && npm run build && npm run test:run",
     "release": "git add dist/. && standard-version -a",
     "prebuild": "npm run build:docs",
-    "build": "rollup --config .rollup.config.js",
+    "build": "npm run build:default; npm run build:disclosure-menu; npm run build:menubar; npm run build:top-link-disclosure-menu; npm run build:treeview",
     "build:docs": "jsdoc -c jsdoc.config.js",
-    "test": "jest"
+    "build:default": "BUILD_TYPE=default vite build",
+    "build:disclosure-menu": "BUILD_TYPE=DisclosureMenu vite build",
+    "build:menubar": "BUILD_TYPE=Menubar vite build",
+    "build:top-link-disclosure-menu": "BUILD_TYPE=TopLinkDisclosureMenu vite build",
+    "build:treeview": "BUILD_TYPE=Treeview vite build",
+    "dev": "vite",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
@@ -49,9 +57,8 @@ "repository": {
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
-    "@babel/eslint-parser": "^7.14.7",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.12.1",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
-    "@rollup/plugin-babel": "^6.0.0",
+    "@vitest/ui": "^0.28.4",
     "commitizen": "^4.2.2",
@@ -63,20 +70,15 @@ "cz-conventional-changelog": "^3.3.0",
     "eslint-config-standard": "^16.0.1",
-    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsdoc": "^39.1.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
     "husky": "^8.0.1",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "jest-extended": "^3.0.0",
     "jsdoc": "^4.0.0",
     "jsdoc-typeof-plugin": "^1.0.0",
+    "jsdom": "^21.1.0",
     "lint-staged": "^13.0.1",
     "prettier": "^2.1.2",
-    "rollup": "^2.33.1",
-    "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.58.0",
     "standard-version": "^9.0.0",
-    "terser": "^5.6.1"
+    "vite": "^4.1.1",
+    "vite-plugin-browser-sync": "^1.0.2",
+    "vitest": "^0.28.4"
   }
 }

README.md

@@ -5,4 +5,4 @@ # accessible-menu
 [![License](https://img.shields.io/github/license/NickDJM/accessible-menu?style=for-the-badge)](/LICENSE)
-[![Jest tests](https://img.shields.io/github/actions/workflow/status/nickdjm/accessible-menu/test.yml?branch=3.x&label=Tests&style=for-the-badge)](https://github.com/NickDJM/accessible-menu/actions/workflows/test.yml)
-[![GitHub CodeQL](https://img.shields.io/github/actions/workflow/status/nickdjm/accessible-menu/codeql-analysis.yml?branch=3.x&label=CodeQL&style=for-the-badge)](https://github.com/NickDJM/accessible-menu/actions/workflows/codeql-analysis.yml)
+[![Jest tests](https://img.shields.io/github/actions/workflow/status/nickdjm/accessible-menu/test.yml?branch=4.x&label=Tests&style=for-the-badge)](https://github.com/NickDJM/accessible-menu/actions/workflows/test.yml)
+[![GitHub CodeQL](https://img.shields.io/github/actions/workflow/status/nickdjm/accessible-menu/codeql-analysis.yml?branch=4.x&label=CodeQL&style=for-the-badge)](https://github.com/NickDJM/accessible-menu/actions/workflows/codeql-analysis.yml)
 
@@ -13,3 +13,4 @@ A JavaScript library to help you generate WCAG accessible menus in the DOM.
 
-- [Disclosure Navigation Menus](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
+- [Disclosure Navigation Menus](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/),
+- [Disclosure Navigation Menus with Top-Level Links](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/),
 - [Navigation Menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/), and
@@ -48,3 +49,3 @@ - [Navigation Treeview](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu@3.0.5/dist/accessible-menu.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/accessible-menu.min.js"></script>
 ```
@@ -83,3 +84,3 @@
 ```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu@3.0.5/dist/accessible-menu.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/accessible-menu.min.js"></script>
 ```
@@ -113,3 +114,3 @@
 ```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu@3.0.5/dist/disclosure-menu.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/disclosure-menu.min.js"></script>
 ```
@@ -135,3 +136,3 @@
 ```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu@3.0.5/dist/menubar.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/menubar.min.js"></script>
 ```
@@ -148,2 +149,23 @@
 
+#### TopLinkDisclosureMenu usage
+
+```js
+import { TopLinkDisclosureMenu } from "accessible-menu";
+```
+
+or
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/top-link-disclosure-menu.min.js"></script>
+```
+
+then
+
+```js
+const menu = new TopLinkDisclosureMenu({
+  menuElement: document.querySelector("#example-menu"),
+  submenuItemSelector: "li.dropdown",
+});
+```
+
 #### Treeview usage
@@ -158,3 +180,3 @@
 ```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu@3.0.5/dist/treeview.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/treeview.min.js"></script>
 ```
@@ -161,0 +183,0 @@

src/_baseMenu.js

@@ -190,2 +190,11 @@ import BaseMenuToggle from "./_baseMenuToggle.js";
   /**
+   * An array of error messages generated by the menu.
+   *
+   * @protected
+   *
+   * @type {string[]}
+   */
+  _errors = [];
+
+  /**
    * Constructs the menu.
@@ -272,3 +281,5 @@ *
       throw new Error(
-        "AccesibleMenu: cannot initialize menu. See other error messages for more information."
+        `AccesibleMenu: cannot initialize menu. The following errors have been found:\n - ${this.errors.join(
+          "\n - "
+        )}`
       );
@@ -490,2 +501,15 @@ }
 
+  /**
+   * An array of error messages generated by the menu.
+   *
+   * @readonly
+   *
+   * @type {string[]}
+   *
+   * @see _errors
+   */
+  get errors() {
+    return this._errors;
+  }
+
   set openClass(value) {
@@ -620,71 +644,101 @@ isValidClassList({ openClass: value });
 
+    // HTML element checks.
+    let htmlElementChecks;
+
     if (this._dom.container !== null || this._dom.controller !== null) {
-      if (
-        !isValidInstance(HTMLElement, {
-          menuElement: this._dom.menu,
-          controllerElement: this._dom.controller,
-          containerElement: this._dom.container,
-        })
-      ) {
-        check = false;
-      }
-    } else if (
-      !isValidInstance(HTMLElement, {
+      htmlElementChecks = isValidInstance(HTMLElement, {
         menuElement: this._dom.menu,
-      })
-    ) {
+        controllerElement: this._dom.controller,
+        containerElement: this._dom.container,
+      });
+    } else {
+      htmlElementChecks = isValidInstance(HTMLElement, {
+        menuElement: this._dom.menu,
+      });
+    }
+
+    if (!htmlElementChecks.status) {
+      this._errors.push(htmlElementChecks.error.message);
       check = false;
     }
 
+    // CSS Selector Checks.
+    let cssSelectorChecks;
+
     if (this._selectors.submenuItems !== "") {
-      if (
-        !isCSSSelector({
-          menuItemSelector: this._selectors.menuItems,
-          menuLinkSelector: this._selectors.menuLinks,
-          submenuItemSelector: this._selectors.submenuItems,
-          submenuToggleSelector: this._selectors.submenuToggles,
-          submenuSelector: this._selectors.submenus,
-        })
-      ) {
-        check = false;
-      }
-    } else if (
-      !isCSSSelector({
+      cssSelectorChecks = isCSSSelector({
         menuItemSelector: this._selectors.menuItems,
         menuLinkSelector: this._selectors.menuLinks,
-      })
-    ) {
-      check = false;
+        submenuItemSelector: this._selectors.submenuItems,
+        submenuToggleSelector: this._selectors.submenuToggles,
+        submenuSelector: this._selectors.submenus,
+      });
+    } else {
+      cssSelectorChecks = isCSSSelector({
+        menuItemSelector: this._selectors.menuItems,
+        menuLinkSelector: this._selectors.menuLinks,
+      });
     }
 
-    if (
-      this._openClass !== "" &&
-      !isValidClassList({ openClass: this._openClass })
-    ) {
+    if (!cssSelectorChecks.status) {
+      this._errors.push(cssSelectorChecks.error.message);
       check = false;
     }
 
-    if (
-      this._closeClass !== "" &&
-      !isValidClassList({ closeClass: this._closeClass })
-    ) {
-      check = false;
+    // Class list checks.
+    if (this._openClass !== "") {
+      const openClassCheck = isValidClassList({ openClass: this._openClass });
+
+      if (!openClassCheck.status) {
+        this._errors.push(openClassCheck.error.message);
+        check = false;
+      }
     }
 
-    if (!isValidType("boolean", { isTopLevel: this._root })) {
-      check = false;
+    if (this._closeClass !== "") {
+      const closeClassCheck = isValidClassList({
+        closeClass: this._closeClass,
+      });
+
+      if (!closeClassCheck.status) {
+        this._errors.push(closeClassCheck.error.message);
+        check = false;
+      }
     }
 
-    if (
-      this._elements.parentMenu !== null &&
-      !isValidInstance(BaseMenu, { parentMenu: this._elements.parentMenu })
-    ) {
+    // Top level check.
+    const topLevelCheck = isValidType("boolean", { isTopLevel: this._root });
+
+    if (!topLevelCheck.status) {
+      this._errors.push(topLevelCheck.error.message);
       check = false;
     }
 
-    if (!isValidHoverType({ hoverType: this._hoverType })) {
+    // Parent menu check.
+    if (this._elements.parentMenu !== null) {
+      const parentCheck = isValidInstance(BaseMenu, {
+        parentMenu: this._elements.parentMenu,
+      });
+
+      if (!parentCheck.status) {
+        this._errors.push(parentCheck.error.message);
+        check = false;
+      }
+    }
+
+    // Hover type check.
+    const hoverTypeCheck = isValidHoverType({ hoverType: this._hoverType });
+
+    if (!hoverTypeCheck.status) {
+      this._errors.push(hoverTypeCheck.error.message);
       check = false;
     }
 
-    if (!isValidType("number", { hoverDelay: this._hoverDelay })) {
+    // Hover delay check.
+    const hoverDelayCheck = isValidType("number", {
+      hoverDelay: this._hoverDelay,
+    });
+
+    if (!hoverDelayCheck.status) {
+      this._errors.push(hoverDelayCheck.error.message);
       check = false;
@@ -691,0 +745,0 @@ }

src/disclosureMenu.js

@@ -195,5 +195,9 @@ import BaseMenu from "./_baseMenu.js";
 
-    if (
-      !isValidType("boolean", { optionalKeySupport: this._optionalSupport })
-    ) {
+    // Option key support check.
+    const optionalSupportCheck = isValidType("boolean", {
+      optionalKeySupport: this._optionalSupport,
+    });
+
+    if (!optionalSupportCheck.status) {
+      this._errors.push(optionalSupportCheck.error.message);
       check = false;
@@ -200,0 +204,0 @@ }

src/validate.js

@@ -12,5 +12,5 @@ /**
  *
- * @param  {object}  contructor - The constructor to check for.
- * @param  {object}  elements   - The element(s) to check.
- * @return {boolean}            - The result of the check.
+ * @param  {object}                  contructor - The constructor to check for.
+ * @param  {object}                  elements   - The element(s) to check.
+ * @return {Object<boolean, string>}            - The result of the check.
  */
@@ -23,3 +23,3 @@ export function isValidInstance(contructor, elements) {
       throw new TypeError(
-        `AccessibleMenu: Elements given to isValidInstance() must be inside of an object. ${elementsType} given.`
+        `Elements given to isValidInstance() must be inside of an object. "${elementsType}" given.`
       );
@@ -32,3 +32,3 @@ }
         throw new TypeError(
-          `AccessibleMenu: ${key} must be an instance of ${contructor.name}. ${elementType} given.`
+          `${key} must be an instance of ${contructor.name}. "${elementType}" given.`
         );
@@ -38,6 +38,11 @@ }
 
-    return true;
+    return {
+      status: true,
+      error: null,
+    };
   } catch (error) {
-    console.error(error);
-    return false;
+    return {
+      status: false,
+      error: error,
+    };
   }
@@ -57,5 +62,5 @@ }
  *
- * @param  {string}  type   - The type to check for.
- * @param  {object}  values - The value(s) to check.
- * @return {boolean}        - The result of the check.
+ * @param  {string}                  type   - The type to check for.
+ * @param  {object}                  values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
  */
@@ -68,3 +73,3 @@ export function isValidType(type, values) {
       throw new TypeError(
-        `AccessibleMenu: Values given to isValidType() must be inside of an object. ${valuesType} given.`
+        `Values given to isValidType() must be inside of an object. "${valuesType}" given.`
       );
@@ -77,12 +82,15 @@ }
       if (valueType !== type) {
-        throw new TypeError(
-          `AccessibleMenu: ${key} must be a ${type}. ${valueType} given.`
-        );
+        throw new TypeError(`${key} must be a ${type}. "${valueType}" given.`);
       }
     }
 
-    return true;
+    return {
+      status: true,
+      error: null,
+    };
   } catch (error) {
-    console.error(error);
-    return false;
+    return {
+      status: false,
+      error: error,
+    };
   }
@@ -99,4 +107,4 @@ }
  *
- * @param  {Object<string>} values - The value(s) to check.
- * @return {boolean}                - The result of the check.
+ * @param  {Object<string>}          values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
  */
@@ -109,3 +117,3 @@ export function isCSSSelector(values) {
       throw new TypeError(
-        `AccessibleMenu: Values given to isCSSSelector() must be inside of an object. ${type} given.`
+        `Values given to isCSSSelector() must be inside of an object. "${type}" given.`
       );
@@ -123,3 +131,3 @@ }
         throw new TypeError(
-          `AccessibleMenu: ${key} must be a valid CSS selector. "${values[key]}" given.`
+          `${key} must be a valid CSS selector. "${values[key]}" given.`
         );
@@ -129,6 +137,11 @@ }
 
-    return true;
+    return {
+      status: true,
+      error: null,
+    };
   } catch (error) {
-    console.error(error);
-    return false;
+    return {
+      status: false,
+      error: error,
+    };
   }
@@ -146,3 +159,3 @@ }
  * @param  {Object<string, string[]>} values - The value(s) to check.
- * @return {boolean}                         - The result of the check.
+ * @return {Object<boolean, string>}         - The result of the check.
  */
@@ -155,3 +168,3 @@ export function isValidClassList(values) {
       throw new TypeError(
-        `AccessibleMenu: Values given to isValidClassList() must be inside of an object. ${type} given.`
+        `Values given to isValidClassList() must be inside of an object. "${type}" given.`
       );
@@ -168,3 +181,3 @@ }
               throw new TypeError(
-                `AccessibleMenu: ${key} must be a string or an array of strings. An array containing non-strings given.`
+                `${key} must be a string or an array of strings. An array containing non-strings given.`
               );
@@ -175,3 +188,3 @@ }
           throw new TypeError(
-            `AccessibleMenu: ${key} must be a string or an array of strings. ${type} given.`
+            `${key} must be a string or an array of strings. "${type}" given.`
           );
@@ -187,6 +200,11 @@ }
 
-    return true;
+    return {
+      status: true,
+      error: null,
+    };
   } catch (error) {
-    console.error(error);
-    return false;
+    return {
+      status: false,
+      error: error,
+    };
   }
@@ -203,4 +221,4 @@ }
  *
- * @param  {Object<string>} values - The value(s) to check.
- * @return {boolean}                - The result of the check.
+ * @param  {Object<string>}          values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
  */
@@ -213,3 +231,3 @@ export function isValidState(values) {
       throw new TypeError(
-        `AccessibleMenu: Values given to isValidState() must be inside of an object. ${type} given.`
+        `Values given to isValidState() must be inside of an object. "${type}" given.`
       );
@@ -223,3 +241,3 @@ }
         throw new TypeError(
-          `AccessibleMenu: ${key} must be one of the following values: ${validStates.join(
+          `${key} must be one of the following values: ${validStates.join(
             ", "
@@ -231,6 +249,11 @@ )}. "${values[key]}" given.`
 
-    return true;
+    return {
+      status: true,
+      error: null,
+    };
   } catch (error) {
-    console.error(error);
-    return false;
+    return {
+      status: false,
+      error: error,
+    };
   }
@@ -247,4 +270,4 @@ }
  *
- * @param  {Object<string>} values - The value(s) to check.
- * @return {boolean}                - The result of the check.
+ * @param  {Object<string>}          values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
  */
@@ -257,3 +280,3 @@ export function isValidEvent(values) {
       throw new TypeError(
-        `AccessibleMenu: Values given to isValidEvent() must be inside of an object. ${type} given.`
+        `Values given to isValidEvent() must be inside of an object. "${type}" given.`
       );
@@ -267,3 +290,3 @@ }
         throw new TypeError(
-          `AccessibleMenu: ${key} must be one of the following values: ${validEvents.join(
+          `${key} must be one of the following values: ${validEvents.join(
             ", "
@@ -275,6 +298,11 @@ )}. "${values[key]}" given.`
 
-    return true;
+    return {
+      status: true,
+      error: null,
+    };
   } catch (error) {
-    console.error(error);
-    return false;
+    return {
+      status: false,
+      error: error,
+    };
   }
@@ -291,4 +319,4 @@ }
  *
- * @param  {Object<string>} values - The value(s) to check.
- * @return {boolean}                - The result of the check.
+ * @param  {Object<string>}          values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
  */
@@ -301,3 +329,3 @@ export function isValidHoverType(values) {
       throw new TypeError(
-        `AccessibleMenu: Values given to isValidHoverType() must be inside of an object. ${type} given.`
+        `Values given to isValidHoverType() must be inside of an object. "${type}" given.`
       );
@@ -311,3 +339,3 @@ }
         throw new TypeError(
-          `AccessibleMenu: ${key} must be one of the following values: ${validTypes.join(
+          `${key} must be one of the following values: ${validTypes.join(
             ", "
@@ -319,6 +347,11 @@ )}. "${values[key]}" given.`
 
-    return true;
+    return {
+      status: true,
+      error: null,
+    };
   } catch (error) {
-    console.error(error);
-    return false;
+    return {
+      status: false,
+      error: error,
+    };
   }
@@ -333,10 +366,10 @@ }
  *
- * @param  {string}               tagName  - The name of the tag.
+ * @param  {string}               tagName - The name of the tag.
  * @param  {Object<HTMLElement>} elements - The element(s) to check.
- * @return {boolean}                       - The result of the check.
+ * @return {boolean}                      - The result of the check.
  */
 export function isTag(tagName, elements) {
   if (
-    isValidType("string", { tagName }) &&
-    isValidInstance(HTMLElement, elements)
+    isValidType("string", { tagName }).status &&
+    isValidInstance(HTMLElement, elements).status
   ) {
@@ -355,23 +388,1 @@ const tag = tagName.toLowerCase();
 }
-
-/**
- * Checks to see if an event is supported by a node.
- *
- * @param  {string}      event   - The event type.
- * @param  {HTMLElement} element - The element to check.
- * @return {boolean}             - The result.
- *
- * @deprecated Will be removed in v4 unless there is a new found need for it.
- */
-export function isEventSupported(event, element) {
-  if (
-    isValidType("string", { event }) &&
-    isValidInstance(HTMLElement, { element })
-  ) {
-    const eventProp = `on${event}`;
-
-    return typeof element[eventProp] !== "undefined";
-  } else {
-    return false;
-  }
-}

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Dev dependency count

24

decreased by-20%

Lines of code

15650

increased by8.76%

Number of lines in readme file

222

increased by11%

Worsened metrics

Total package byte prevSize

713099

decreased by-72.08%

Number of package files

31

decreased by-32.61%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes