aria-components - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.3.1
+
+**Changed**
+
+- Loosens MenuBar Popups' markup requirements (#45)
+
+**Fixed**
+
+- Updates docs site dependencies (#47)
+
 ## 0.3.0
@@ -5,0 +15,0 @@

package.json

 {
   "name": "aria-components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "JavaScript classes to aid in accessible web development.",
@@ -18,8 +18,8 @@ "keywords": [
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "autoprefixer": "^9.6.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.5.1",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.4",
@@ -43,6 +43,6 @@ "babel-minify-webpack-plugin": "^0.3.1",
     "file-loader": "^2.0.0",
-    "jest": "^25.5.3",
-    "jest-cli": "^25.5.3",
+    "jest": "^26.6.3",
+    "jest-cli": "^26.6.3",
     "mini-css-extract-plugin": "^0.4.5",
-    "node-sass": "^4.14.0",
+    "node-sass": "^5.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -54,12 +54,12 @@ "postcss": "^7.0.6",
     "read-yaml": "^1.1.0",
-    "resolve-url-loader": "^3.0.0",
-    "sass-loader": "^7.1.0",
+    "resolve-url-loader": "^3.1.2",
+    "sass-loader": "^10.1.0",
     "sass-resources-loader": "^2.0.0",
     "style-loader": "^0.23.1",
     "stylelint": "^13.3.3",
-    "stylelint-webpack-plugin": "^1.0.2",
+    "stylelint-webpack-plugin": "^2.1.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.10.3",
+    "webpack-dev-server": "^3.11.1",
     "webpack-livereload-plugin": "^2.1.1",
@@ -71,2 +71,3 @@ "webpack-stats-plugin": "^0.2.1",
     "test": "jest",
+    "lint": "eslint src/**/*.js",
     "watch": "jest --watchAll",
@@ -82,3 +83,4 @@ "watch:verbose": "jest --watchAll  --verbose",
     "testEnvironment": "jsdom"
-  }
+  },
+  "dependencies": {}
 }

src/Dialog/README.md

@@ -187,3 +187,3 @@ Dialog
 ```javascript
-import { Dialog } from 'AriaComponents';
+import { Dialog } from 'aria-components';
 
@@ -190,0 +190,0 @@ const controller = document.querySelector('.link');

src/Disclosure/index.js

@@ -308,3 +308,6 @@ import AriaComponent from '../AriaComponent';
     this.controller.removeEventListener('click', this.toggleExpandedState);
-    this.controller.removeEventListener('keydown', this.handleControllerKeydown);
+    this.controller.removeEventListener(
+      'keydown',
+      this.handleControllerKeydown
+    );
     document.body.removeEventListener('click', this.closeOnOutsideClick);
@@ -311,0 +314,0 @@

src/Disclosure/README.md

@@ -127,3 +127,3 @@ Disclosure
 ```javascript
-import { Disclosure } from 'AriaComponents';
+import { Disclosure } from 'aria-components';
 
@@ -130,0 +130,0 @@ const controller = document.querySelector('button');

src/lib/rovingTabIndex.js

@@ -16,3 +16,6 @@ /**
     shouldBeAnArray = new Array(maybeAnArray);
-  } else if (maybeAnArray instanceof NodeList || maybeAnArray instanceof HTMLCollection) {
+  } else if (
+    maybeAnArray instanceof NodeList
+    || maybeAnArray instanceof HTMLCollection
+  ) {
     // Array.from(maybeAnArray);
@@ -19,0 +22,0 @@ shouldBeAnArray = Array.prototype.slice.call(maybeAnArray, 0);

src/Listbox/index.js

@@ -124,3 +124,3 @@ import AriaComponent from '../AriaComponent';
     // Save first and last option as properties.
-    const [ firstOption, lastOption ] = getFirstAndLastItems(this.options);
+    const [firstOption, lastOption] = getFirstAndLastItems(this.options);
     Object.assign(this, { firstOption, lastOption });
@@ -127,0 +127,0 @@

src/Listbox/README.md

@@ -152,3 +152,3 @@ Listbox
 ```javascript
-import { Listbox } from 'AriaComponents';
+import { Listbox } from 'aria-components';
 
@@ -155,0 +155,0 @@ const controller = document.querySelector('button');

src/Menu/index.js

@@ -195,3 +195,3 @@ import AriaComponent from '../AriaComponent';
     // Save the menu's first and last items.
-    const [ firstItem, lastItem ] = getFirstAndLastItems(this.menuItems);
+    const [firstItem, lastItem] = getFirstAndLastItems(this.menuItems);
     Object.assign(this, { firstItem, lastItem });
@@ -198,0 +198,0 @@

src/Menu/README.md

@@ -97,3 +97,3 @@ Menu
 ```javascript
-import { Menu } from 'AriaComponents';
+import { Menu } from 'aria-components';
 
@@ -100,0 +100,0 @@ const list = document.querySelector('.menu');

src/MenuBar/index.js

@@ -188,3 +188,3 @@ import AriaComponent from '../AriaComponent';
     // Collect first and last MenuBar items and merge them in as instance properties.
-    const [ firstItem, lastItem ] = getFirstAndLastItems(this.menuBarItems);
+    const [firstItem, lastItem] = getFirstAndLastItems(this.menuBarItems);
     Object.assign(this, { firstItem, lastItem });
@@ -204,26 +204,43 @@
     // Initialize popups for nested lists.
-    this.popups = this.menuBarItems.reduce((acc, controller) => {
+    const { popups, subMenus } = this.menuBarItems.reduce((acc, controller) => {
       const target = controller.nextElementSibling;
 
-      if (null !== target && 'UL' === target.nodeName) {
-        const popup = new Popup({
-          controller,
-          target,
-          onInit: this.onPopupInit,
-          type: 'menu',
-        });
+      // Bail if there's no target.
+      if (null === target) {
+        return acc;
+      }
 
-        // Initialize submenu Menus.
-        const subList = new Menu({ list: target });
-        target.addEventListener('keydown', this.handleMenuItemKeydown);
+      const popup = new Popup({
+        controller,
+        target,
+        onInit: this.onPopupInit,
+        type: 'menu',
+      });
 
-        // Save the list's previous sibling.
-        subList.previousSibling = controller;
+      acc.popups.push(popup);
 
-        return [...acc, popup];
+      // If target isn't a UL, find the UL in target and use it.
+      const list = ('UL' === target.nodeName)
+        ? target
+        : target.querySelector('ul');
+
+      // Bail if there's no list.
+      if (null === list) {
+        return acc;
       }
 
+      // Initialize submenu Menus.
+      const subMenu = new Menu({ list });
+      target.addEventListener('keydown', this.handleMenuItemKeydown);
+
+      // Save the list's previous sibling.
+      subMenu.previousSibling = controller;
+      acc.subMenus.push(subMenu);
+
       return acc;
-    }, []);
+    }, { popups: [], subMenus: [] });
 
+    // Save components as instance properties.
+    Object.assign(this, { popups, subMenus });
+
     /**
@@ -431,7 +448,4 @@ * Set initial state.
 
-    // Destroy nested components.
+    // Destroy popups.
     this.popups.forEach((popup) => {
-      if (isInstanceOf(popup.target.menu, Menu)) {
-        popup.target.menu.destroy();
-      }
       popup.target.removeEventListener('keydown', this.handleMenuItemKeydown);
@@ -442,2 +456,7 @@
 
+    // Destroy subMenus.
+    this.subMenus.forEach((submenu) => {
+      submenu.destroy();
+    });
+
     // Run {destroyCallback}
@@ -444,0 +463,0 @@ this.onDestroy.call(this);

src/MenuBar/README.md

@@ -88,2 +88,9 @@ MenuBar
 
+## Additional Notes
+
+If a menu item has a sibling, that sibling will be turned into a "submenu popup".
+If that element is not a UL element, the script will search the popup target with
+`Element.querySelector('ul')` and use that as the `list` passed to the `Menu` 
+component.
+
 ## Example
@@ -117,3 +124,3 @@
 ```javascript
-import { MenuBar } from 'AriaComponents';
+import { MenuBar } from 'aria-components';
 
@@ -120,0 +127,0 @@ const list = document.querySelector('.menu');

src/MenuButton/index.js

@@ -209,3 +209,6 @@ import AriaComponent from '../AriaComponent';
     // Remove event listener.
-    this.controller.removeEventListener('keydown', this.handleControllerKeydown);
+    this.controller.removeEventListener(
+      'keydown',
+      this.handleControllerKeydown
+    );
 
@@ -212,0 +215,0 @@ // Run {destroyCallback}

src/MenuButton/README.md

@@ -139,3 +139,3 @@ MenuButton
 ```javascript
-import { MenuButton } from 'AriaComponents';
+import { MenuButton } from 'aria-components';
 
@@ -142,0 +142,0 @@ const controller = document.querySelector('button');

src/Popup/README.md

@@ -135,3 +135,3 @@ Popup
 ```javascript
-import { Popup } from 'AriaComponents';
+import { Popup } from 'aria-components';
 
@@ -138,0 +138,0 @@ const controller = document.querySelector('button');

src/Tablist/index.js

@@ -214,3 +214,3 @@ import AriaComponent from '../AriaComponent';
     // Save the active panel's interactive children.
-    this.interactiveChildElements = interactiveChildren(this.panels[activeIndex]);
+    this.interactiveChildElements = interactiveChildren(this.panels[activeIndex]); // eslint-disable-line max-len
 
@@ -256,3 +256,3 @@ // Run {initCallback}
     // Allow tabbing to the newly-active panel.
-    this.interactiveChildElements = interactiveChildren(this.panels[activeIndex]);
+    this.interactiveChildElements = interactiveChildren(this.panels[activeIndex]); // eslint-disable-line max-len
     tabIndexAllow(this.interactiveChildElements);
@@ -259,0 +259,0 @@

src/Tablist/README.md

@@ -145,3 +145,3 @@ Tablist
 ```javascript
-import { Tablist } from 'AriaComponents';
+import { Tablist } from 'aria-components';
 
@@ -148,0 +148,0 @@ const tabs = document.querySelector('.tabs');

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

127973

increased by2.22%

Number of package files

35

increased by2.94%

Lines of code

3211

increased by3.31%

No dependency changes