feat(menus): add default submenuItemSelector

See #310

demo/main.js

@@ -71,7 +71,6 @@ function generateMenu(type, structure, hover, container, options = {}) {
 
     const menu = new MenuClass({
       menuElement: nav.querySelector("ul"),
-      submenuItemSelector: ".dropdown",
       containerElement: nav,
       controllerElement: nav.querySelector("button"),
       hoverType: hover,

docs/api/base-menu.md

@@ -41,7 +41,7 @@ The constructor populates the dom, selector, CSS class, and hover related proper
 | options.menuElement | `HTMLElement` | The menu element in the DOM. | `undefined` |
 | options.menuItemSelector | `string` | The query selector string for menu items. | `"li"` |
 | options.menuLinkSelector | `string` | The query selector string for menu links. | `"a"` |
-| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `undefined` |
+| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `li:has(ul)` |
 | options.submenuToggleSelector | `string` | The query selector string for submenu toggle buttons/links. | `"a"` |
 | options.submenuSelector | `string` | The query selector string for submenus. | `"ul"` |
 | options.controllerElement | `HTMLElement`, `null` | The element controlling the menu in the DOM. | `null` |

docs/api/disclosure-menu.md

@@ -46,7 +46,7 @@ The constructor will call [BaseMenu's constructor](./base-menu#constructor) with
 | options.menuElement | `HTMLElement` | The menu element in the DOM. | `undefined` |
 | options.menuItemSelector | `string` | The query selector string for menu items. | `"li"` |
 | options.menuLinkSelector | `string` | The query selector string for menu links. | `"a"` |
-| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `undefined` |
+| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `li:has(ul)` |
 | options.submenuToggleSelector | `string` | The query selector string for submenu toggle buttons/links. | `"button"` |
 | options.submenuSelector | `string` | The query selector string for submenus. | `"ul"` |
 | options.controllerElement | `HTMLElement`, `null` | The element controlling the menu in the DOM. | `null` |

docs/api/menubar.md

@@ -45,7 +45,7 @@ The constructor will call [BaseMenu's constructor](./base-menu#constructor) with
 | options.menuElement | `HTMLElement` | The menu element in the DOM. | `undefined` |
 | options.menuItemSelector | `string` | The query selector string for menu items. | `"li"` |
 | options.menuLinkSelector | `string` | The query selector string for menu links. | `"a"` |
-| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `undefined` |
+| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `li:has(ul)` |
 | options.submenuToggleSelector | `string` | The query selector string for submenu toggle buttons/links. | `"a"` |
 | options.submenuSelector | `string` | The query selector string for submenus. | `"ul"` |
 | options.controllerElement | `HTMLElement`, `null` | The element controlling the menu in the DOM. | `null` |

docs/api/top-link-disclosure-menu.md

@@ -47,7 +47,7 @@ The constructor will call [BaseMenu's constructor](./base-menu#constructor) with
 | options.menuElement | `HTMLElement` | The menu element in the DOM. | `undefined` |
 | options.menuItemSelector | `string` | The query selector string for menu items. | `"li"` |
 | options.menuLinkSelector | `string` | The query selector string for menu links. | `"a"` |
-| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `undefined` |
+| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `li:has(ul)` |
 | options.submenuToggleSelector | `string` | The query selector string for submenu toggle buttons/links. | `"button"` |
 | options.submenuSelector | `string` | The query selector string for submenus. | `"ul"` |
 | options.submenuSubtoggleSelector | `string` | The query selector string for submenu toggle buttons/links below the top level. | `"a"` |

docs/api/treeview.md

@@ -45,7 +45,7 @@ The constructor will call [BaseMenu's constructor](./base-menu#constructor) with
 | options.menuElement | `HTMLElement` | The menu element in the DOM. | `undefined` |
 | options.menuItemSelector | `string` | The query selector string for menu items. | `"li"` |
 | options.menuLinkSelector | `string` | The query selector string for menu links. | `"a"` |
-| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `undefined` |
+| options.submenuItemSelector | `string` | The query selector string for menu items containing submenus. | `li:has(ul)` |
 | options.submenuToggleSelector | `string` | The query selector string for submenu toggle buttons/links. | `"a"` |
 | options.submenuSelector | `string` | The query selector string for submenus. | `"ul"` |
 | options.controllerElement | `HTMLElement`, `null` | The element controlling the menu in the DOM. | `null` |

docs/disclosure-menus.md

@@ -65,7 +65,6 @@ const menu = document.querySelector("#creature-menu ul");
 
 const disclosureMenu = new DisclosureMenu({
   menuElement: menu,
-  submenuItemSelector: ".dropdown",
 });
 ```
 

docs/quick-start.md

@@ -94,7 +94,6 @@ import { DisclosureMenu } from "accessible-menu";
 
 const menu = new DisclosureMenu({
   menuElement: document.querySelector("#example-menu"),
-  submenuItemSelector: ".dropdown",
 });
 ```
 
@@ -103,7 +102,6 @@ import { Menubar } from "accessible-menu";
 
 const menu = new Menubar({
   menuElement: document.querySelector("#example-menu"),
-  submenuItemSelector: ".dropdown",
 });
 ```
 
@@ -112,7 +110,6 @@ import { Treeview } from "accessible-menu";
 
 const menu = new Treeview({
   menuElement: document.querySelector("#example-menu"),
-  submenuItemSelector: ".dropdown",
 });
 ```
 

docs/top-link-disclosure-menus.md

@@ -66,7 +66,6 @@ const menu = document.querySelector("#creature-menu ul");
 
 const disclosureMenu = new TopLinkDisclosureMenu({
   menuElement: menu,
-  submenuItemSelector: ".dropdown",
 });
 ```
 

docs/treeviews.md

@@ -65,7 +65,6 @@ const menu = document.querySelector("#creature-menu ul");
 
 const disclosureMenu = new Treeview({
   menuElement: menu,
-  submenuItemSelector: ".dropdown",
 });
 ```
 

src/_baseMenu.js

@@ -235,30 +235,30 @@ class BaseMenu {
   /**
    * Constructs a new `BaseMenu`.
    *
-   * @param {object}             options                                   - The options for generating the menu.
-   * @param {HTMLElement}        options.menuElement                       - The menu element in the DOM.
-   * @param {string}             [options.menuItemSelector = li]           - The query selector string for menu items.
-   * @param {string}             [options.menuLinkSelector = a]            - The query selector string for menu links.
-   * @param {string}             [options.submenuItemSelector]             - The query selector string for menu items containing submenus.
-   * @param {string}             [options.submenuToggleSelector = a]       - The query selector string for submenu toggle buttons/links.
-   * @param {string}             [options.submenuSelector = ul]            - The query selector string for submenus.
-   * @param {?HTMLElement}       [options.controllerElement = null]        - The element controlling the menu in the DOM.
-   * @param {?HTMLElement}       [options.containerElement = null]         - The element containing the menu in the DOM.
-   * @param {?(string|string[])} [options.openClass = show]                - The class to apply when a menu is "open".
-   * @param {?(string|string[])} [options.closeClass = hide]               - The class to apply when a menu is "closed".
-   * @param {?(string|string[])} [options.transitionClass = transitioning] - The class to apply when a menu is transitioning between "open" and "closed" states.
-   * @param {boolean}            [options.isTopLevel = false]              - A flag to mark the root menu.
-   * @param {?BaseMenu}          [options.parentMenu = null]               - The parent menu to this menu.
-   * @param {string}             [options.hoverType = off]                 - The type of hoverability a menu has.
-   * @param {number}             [options.hoverDelay = 250]                - The delay for opening and closing menus if the menu is hoverable (in miliseconds).
-   * @param {number}             [options.enterDelay = -1]                 - The delay for opening menus if the menu is hoverable (in miliseconds).
-   * @param {number}             [options.leaveDelay = -1]                 - The delay for closing menus if the menu is hoverable (in miliseconds).
+   * @param {object}             options                                    - The options for generating the menu.
+   * @param {HTMLElement}        options.menuElement                        - The menu element in the DOM.
+   * @param {string}             [options.menuItemSelector = li]            - The query selector string for menu items.
+   * @param {string}             [options.menuLinkSelector = a]             - The query selector string for menu links.
+   * @param {string}             [options.submenuItemSelector = li:has(ul)] - The query selector string for menu items containing submenus.
+   * @param {string}             [options.submenuToggleSelector = a]        - The query selector string for submenu toggle buttons/links.
+   * @param {string}             [options.submenuSelector = ul]             - The query selector string for submenus.
+   * @param {?HTMLElement}       [options.controllerElement = null]         - The element controlling the menu in the DOM.
+   * @param {?HTMLElement}       [options.containerElement = null]          - The element containing the menu in the DOM.
+   * @param {?(string|string[])} [options.openClass = show]                 - The class to apply when a menu is "open".
+   * @param {?(string|string[])} [options.closeClass = hide]                - The class to apply when a menu is "closed".
+   * @param {?(string|string[])} [options.transitionClass = transitioning]  - The class to apply when a menu is transitioning between "open" and "closed" states.
+   * @param {boolean}            [options.isTopLevel = false]               - A flag to mark the root menu.
+   * @param {?BaseMenu}          [options.parentMenu = null]                - The parent menu to this menu.
+   * @param {string}             [options.hoverType = off]                  - The type of hoverability a menu has.
+   * @param {number}             [options.hoverDelay = 250]                 - The delay for opening and closing menus if the menu is hoverable (in miliseconds).
+   * @param {number}             [options.enterDelay = -1]                  - The delay for opening menus if the menu is hoverable (in miliseconds).
+   * @param {number}             [options.leaveDelay = -1]                  - The delay for closing menus if the menu is hoverable (in miliseconds).
    */
   constructor({
     menuElement,
     menuItemSelector = "li",
     menuLinkSelector = "a",
-    submenuItemSelector = "",
+    submenuItemSelector = "li:has(ul)",
     submenuToggleSelector = "a",
     submenuSelector = "ul",
     controllerElement = null,

src/disclosureMenu.js

@@ -60,32 +60,32 @@ class DisclosureMenu extends BaseMenu {
   /**
    * Constructs a new `DisclosureMenu`.
    *
-   * @param {object}             options                                   - The options for generating the menu.
-   * @param {HTMLElement}        options.menuElement                       - The menu element in the DOM.
-   * @param {string}             [options.menuItemSelector = li]           - The query selector string for menu items.
-   * @param {string}             [options.menuLinkSelector = a]            - The query selector string for menu links.
-   * @param {string}             [options.submenuItemSelector]             - The query selector string for menu items containing submenus.
-   * @param {string}             [options.submenuToggleSelector = button]  - The query selector string for submenu toggle buttons/links.
-   * @param {string}             [options.submenuSelector = ul]            - The query selector string for submenus.
-   * @param {?HTMLElement}       [options.controllerElement = null]        - The element controlling the menu in the DOM.
-   * @param {?HTMLElement}       [options.containerElement = null]         - The element containing the menu in the DOM.
-   * @param {?(string|string[])} [options.openClass = show]                - The class to apply when a menu is "open".
-   * @param {?(string|string[])} [options.closeClass = hide]               - The class to apply when a menu is "closed".
-   * @param {?(string|string[])} [options.transitionClass = transitioning] - The class to apply when a menu is transitioning between "open" and "closed" states.
-   * @param {boolean}            [options.isTopLevel = true]               - A flag to mark the root menu.
-   * @param {?DisclosureMenu}    [options.parentMenu = null]               - The parent menu to this menu.
-   * @param {string}             [options.hoverType = off]                 - The type of hoverability a menu has.
-   * @param {number}             [options.hoverDelay = 250]                - The delay for opening and closing menus if the menu is hoverable (in miliseconds).
-   * @param {number}             [options.enterDelay = -1]                 - The delay for opening a menu if the menu is focusable (in miliseconds).
-   * @param {number}             [options.leaveDelay = -1]                 - The delay for closing a menu if the menu is focusable (in miliseconds).
-   * @param {boolean}            [options.optionalKeySupport = false]      - A flag to add optional keyboard support (Arrow keys, Home, and End) to the menu.
-   * @param {boolean}            [options.initialize = true]               - A flag to initialize the menu immediately upon creation.
+   * @param {object}             options                                    - The options for generating the menu.
+   * @param {HTMLElement}        options.menuElement                        - The menu element in the DOM.
+   * @param {string}             [options.menuItemSelector = li]            - The query selector string for menu items.
+   * @param {string}             [options.menuLinkSelector = a]             - The query selector string for menu links.
+   * @param {string}             [options.submenuItemSelector = li:has(ul)] - The query selector string for menu items containing submenus.
+   * @param {string}             [options.submenuToggleSelector = button]   - The query selector string for submenu toggle buttons/links.
+   * @param {string}             [options.submenuSelector = ul]             - The query selector string for submenus.
+   * @param {?HTMLElement}       [options.controllerElement = null]         - The element controlling the menu in the DOM.
+   * @param {?HTMLElement}       [options.containerElement = null]          - The element containing the menu in the DOM.
+   * @param {?(string|string[])} [options.openClass = show]                 - The class to apply when a menu is "open".
+   * @param {?(string|string[])} [options.closeClass = hide]                - The class to apply when a menu is "closed".
+   * @param {?(string|string[])} [options.transitionClass = transitioning]  - The class to apply when a menu is transitioning between "open" and "closed" states.
+   * @param {boolean}            [options.isTopLevel = true]                - A flag to mark the root menu.
+   * @param {?DisclosureMenu}    [options.parentMenu = null]                - The parent menu to this menu.
+   * @param {string}             [options.hoverType = off]                  - The type of hoverability a menu has.
+   * @param {number}             [options.hoverDelay = 250]                 - The delay for opening and closing menus if the menu is hoverable (in miliseconds).
+   * @param {number}             [options.enterDelay = -1]                  - The delay for opening a menu if the menu is focusable (in miliseconds).
+   * @param {number}             [options.leaveDelay = -1]                  - The delay for closing a menu if the menu is focusable (in miliseconds).
+   * @param {boolean}            [options.optionalKeySupport = false]       - A flag to add optional keyboard support (Arrow keys, Home, and End) to the menu.
+   * @param {boolean}            [options.initialize = true]                - A flag to initialize the menu immediately upon creation.
    */
   constructor({
     menuElement,
     menuItemSelector = "li",
     menuLinkSelector = "a",
-    submenuItemSelector = "",
+    submenuItemSelector = "li:has(ul)",
     submenuToggleSelector = "button",
     submenuSelector = "ul",
     controllerElement = null,