Merge pull request #45 from goodguyry/feature/menu-submenu-configuration

Feature: Support non-UL MenuBar Submenu Popups

.eslintrc.js

@@ -17,6 +17,9 @@ module.exports = {
     node: true,
     jest: true,
   },
+  globals: {
+    siteClassNames: true,
+  },
   settings: {
     'import/resolver': {
       'babel-module': {},

.gitignore

@@ -36,6 +36,7 @@ vendor
 # Application files #
 ######################
 *.sass-cache
+*.jekyll-cache
 *.sublime-*
 .project
 .settings

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.3.1
+
+**Changed**
+
+- Loosens MenuBar Popups' markup requirements (#45)
+
 ## 0.3.0
 
 **Changed**

docs/_data/assets.yaml

@@ -1 +1 @@
-global: { css: 'build/css/global.f0739c4bd2ecae532939.min.css', js: 'build/js/global.14686bc4c744d0a95265.bundle.min.js' }
+global: { css: 'build/css/global.dd061c22a39f20900817.min.css', js: 'build/js/global.353c609fea64cc772d5e.bundle.min.js' }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "JavaScript classes to aid in accessible web development.",
   "keywords": [
     "a11y",

src/MenuBar/MenuBar.test.js

@@ -26,12 +26,14 @@ const menubarMarkup = `
       <li><a class="second-item" href="example.com">Cake</a></li>
       <li>
         <a class="third-item" href="example.com">Vegetables</a>
-        <ul class="sublist2">
-          <li><a class="sublist2-first-item" href="example.com">Carrots</a></li>
-          <li><a class="sublist2-second-item" href="example.com">Broccoli</a></li>
-          <li><a class="sublist2-third-item" href="example.com">Brussel Sprouts</a></li>
-          <li><a class="sublist2-last-item" href="example.com">Asparagus</a></li>
-        </ul>
+        <div class="not-a-list">
+          <ul class="sublist2">
+            <li><a class="sublist2-first-item" href="example.com">Carrots</a></li>
+            <li><a class="sublist2-second-item" href="example.com">Broccoli</a></li>
+            <li><a class="sublist2-third-item" href="example.com">Brussel Sprouts</a></li>
+            <li><a class="sublist2-last-item" href="example.com">Asparagus</a></li>
+          </ul>
+        </div>
       </li>
       <li><a class="fourth-item" href="example.com">Pie</a></li>
       <li><a class="last-item" href="example.com">Ice Cream</a></li>

src/MenuBar/README.md

@@ -85,6 +85,13 @@ MenuBar.menu
 MenuBar.menuBarItems
 ```
 
+## 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
 
 ```html

src/MenuBar/index.js

@@ -200,29 +200,46 @@ export default class MenuBar extends AriaComponent {
     });
 
     // 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;
+      }
+
+      const popup = new Popup({
+        controller,
+        target,
+        onInit: this.onPopupInit,
+        type: 'menu',
+      });
 
-        // Initialize submenu Menus.
-        const subList = new Menu({ list: target });
-        target.addEventListener('keydown', this.handleMenuItemKeydown);
+      acc.popups.push(popup);
 
-        // Save the list's previous sibling.
-        subList.previousSibling = controller;
+      // If target isn't a UL, find the UL in target and use it.
+      const list = ('UL' === target.nodeName)
+        ? target
+        : target.querySelector('ul');
 
-        return [...acc, popup];
+      // 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 });
 
     /**
      * Set initial state.
@@ -426,16 +443,18 @@ export default class MenuBar extends AriaComponent {
     // Remove tabindex attribute.
     tabIndexAllow(this.menuBarItems);
 
-    // 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);
 
       popup.destroy();
     });
 
+    // Destroy subMenus.
+    this.subMenus.forEach((submenu) => {
+      submenu.destroy();
+    });
+
     // Run {destroyCallback}
     this.onDestroy.call(this);
   }