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);
  }