DisclosureMenu

DisclosureMenu

An accessible disclosure menu in the DOM.

See Example Disclosure for Navigation Menus

Constructor

new DisclosureMenu(options)

Description:

  • Constructs the menu.

Source:
Example
// Import the class.
import { DisclosureMenu } from "accessible-menu";

// Select the desired menu element.
const menuElement = document.querySelector("nav ul");

// Create the menu.
const menu = new DisclosureMenu({
  menuElement,
});
Parameters:
Name Type Description
options object

The options for generating the menu.

Properties
Name Type Attributes Default Description
menuElement HTMLElement

The menu element in the DOM.
menuItemSelector string <optional>
 li

The CSS selector string for menu items.
menuLinkSelector string <optional>
 a

The CSS selector string for menu links.
submenuItemSelector string <optional>

The CSS selector string for menu items containing submenus.
submenuToggleSelector string <optional>
 a

The CSS selector string for submenu toggle buttons/links.
submenuSelector string <optional>
 ul

The CSS selector string for submenus.
controllerElement HTMLElement | null <optional>
 null

The element controlling the menu in the DOM.
containerElement HTMLElement | null <optional>
 null

The element containing the menu in the DOM.
openClass string | Array.<string> | null <optional>
 show

The class to apply when a menu is "open".
closeClass string | Array.<string> | null <optional>
 hide

The class to apply when a menu is "closed".
isTopLevel boolean <optional>
 true

A flag to mark the root menu.
parentMenu DisclosureMenu | null <optional>
 null

The parent menu to this menu.
hoverType string <optional>
 off

The type of hoverability a menu has.
hoverDelay number <optional>
 250

The delay for closing menus if the menu is hoverable (in miliseconds).
optionalKeySupport boolean <optional>
 false

A flag to add optional keyboard support (Arrow keys, Home, and End) to the menu.
initialize boolean <optional>
 true

A flag to initialize the menu immediately upon creation.

Extends

Members

(protected) _MenuType :Class.<DisclosureMenu>

Description:

  • The class to use when generating submenus.

Source:
Overrides:

The class to use when generating submenus.

Type:

(protected) _MenuItemType :Class.<DisclosureMenuItem>

Description:

  • The class to use when generating menu items.

Source:
Overrides:

The class to use when generating menu items.

Type:

(protected) _MenuToggleType :Class.<DisclosureMenuToggle>

Description:

  • The class to use when generating submenu toggles.

Source:
Overrides:

The class to use when generating submenu toggles.

Type:

(protected) _currentChild :number

Description:

  • The index of the currently selected menu item in the menu.

Source:
Overrides:

The index of the currently selected menu item in the menu.

Type:
  • number

(protected) _optionalSupport :boolean

Description:

  • A flag to add optional keyboard support (Arrow keys, "Home", and "End") to the menu.

Source:

A flag to add optional keyboard support (Arrow keys, "Home", and "End") to the menu.

Type:
  • boolean

optionalKeySupport :boolean

Description:

  • A flag to add optional keyboard support (Arrow keys, "Home", and "End") to the menu.

    This functions differently for root vs. submenus. Submenus will always inherit their root menu's optionalKeySupport.

Source:
See:
  • _optionalSupport

A flag to add optional keyboard support (Arrow keys, "Home", and "End") to the menu.

This functions differently for root vs. submenus. Submenus will always inherit their root menu's optionalKeySupport.

Type:
  • boolean

(protected) _dom :Object.<HTMLElement, Array.<HTMLElement>>

Description:

  • The DOM elements within the menu.

Source:
Overrides:
Properties:
Name Type Description
menu HTMLElement

The menu element.
menuItems Array.<HTMLElement>

An array of menu items.
submenuItems Array.<HTMLElement>

An array of menu items that also contain submenu elements.
submenuToggles Array.<HTMLElement>

An array of menu links that function as submenu toggles.
submenus Array.<HTMLElement>

An array of submenu elements.
controller HTMLElement

The toggle for this menu.
container HTMLElement

The container for this menu.

The DOM elements within the menu.

Type:
  • Object.<HTMLElement, Array.<HTMLElement>>

(protected) _selectors :Object.<string>

Description:

  • The CSS selectors used by the menu to populate the dom.

Source:
Overrides:
Properties:
Name Type Description
menuItems string

The CSS selector for menu items.
menuLinks string

The CSS selector for menu links.
submenuItems string

The CSS selector for menu items containing submenus.
submenuToggles string

The CSS selector for menu links that function as submenu toggles.
submenus string

The CSS selector for for submenus.

The CSS selectors used by the menu to populate the dom.

Type:
  • Object.<string>

(protected) _elements :Object.<BaseMenu, BaseMenuToggle, Array.<BaseMenuItem>, Array.<BaseMenuToggle>>

Description:

  • The declared accessible-menu elements within the menu.

Source:
Overrides:
Properties:
Name Type Attributes Description
menuItems Array.<BaseMenuItem>

An array of menu items.
submenuToggles Array.<BaseMenuToggle>

An array of menu toggles.
controller BaseMenuToggle <nullable>

A menu toggle that controls this menu.
parentMenu BaseMenu <nullable>

The parent menu.
rootMenu BaseMenu <nullable>

The root menu of the menu tree.

The declared accessible-menu elements within the menu.

Type:

(protected) _openClass :string|Array.<string>

Description:

  • The class(es) to apply when the menu is open.

Source:
Overrides:

The class(es) to apply when the menu is open.

Type:
  • string | Array.<string>

(protected) _closeClass :string|Array.<string>

Description:

  • The class(es) to apply when the menu is closed.

Source:
Overrides:

The class(es) to apply when the menu is closed.

Type:
  • string | Array.<string>

(protected) _root :boolean

Description:

  • A flag marking the root menu.

Source:
Overrides:

A flag marking the root menu.

Type:
  • boolean

(protected) _focusState :string

Description:

  • The current state of the menu's focus.

Source:
Overrides:

The current state of the menu's focus.

Type:
  • string

(protected) _currentEvent :string

Description:

  • This last event triggered on the menu.

Source:
Overrides:

This last event triggered on the menu.

Type:
  • string

(protected) _hoverType :string

Description:

  • The type of hoverability for the menu.

Source:
Overrides:

The type of hoverability for the menu.

Type:
  • string

(protected) _hoverDelay :number

Description:

  • The delay time (in miliseconds) used for mouseout events to take place.

Source:
Overrides:

The delay time (in miliseconds) used for mouseout events to take place.

Type:
  • number

(readonly) dom :Object.<HTMLElement, Array.<HTMLElement>>

Description:

  • The DOM elements within the menu.

Source:
Overrides:
See:
  • _dom

The DOM elements within the menu.

Type:
  • Object.<HTMLElement, Array.<HTMLElement>>

(readonly) selectors :Object.<string>

Description:

  • The CSS selectors used by the menu to populate the dom.

Source:
Overrides:
See:
  • _selectors

The CSS selectors used by the menu to populate the dom.

Type:
  • Object.<string>

(readonly) elements :Object.<BaseMenu, BaseMenuToggle, Array.<BaseMenuItem>, Array.<BaseMenuToggle>>

Description:

  • The declared accessible-menu elements within the menu.

Source:
Overrides:
See:
  • _elements

The declared accessible-menu elements within the menu.

Type:

(readonly) isTopLevel :boolean

Description:

  • The flag marking the root menu.

Source:
Overrides:
See:
  • _root

The flag marking the root menu.

Type:
  • boolean

openClass :string|Array.<string>

Description:

  • The class(es) to apply when the menu is open.

    This functions differently for root vs. submenus. Submenus will always inherit their root menu's open class(es).

Source:
Overrides:
See:
  • _openClass

The class(es) to apply when the menu is open.

This functions differently for root vs. submenus. Submenus will always inherit their root menu's open class(es).

Type:
  • string | Array.<string>

closeClass :string|Array.<string>

Description:

  • The class(es) to apply when the menu is closed.

    This functions differently for root vs. submenus. Submenus will always inherit their root menu's close class(es).

Source:
Overrides:
See:
  • _closeClass

The class(es) to apply when the menu is closed.

This functions differently for root vs. submenus. Submenus will always inherit their root menu's close class(es).

Type:
  • string | Array.<string>

currentChild :number

Description:

  • The index of the currently selected menu item in the menu.

    • Attempting to set a value less than -1 will set the current child to -1.
    • Attempting to set a value greater than or equal to the number of menu items will set the current child to the index of the last menu item in the menu.

    If the current menu has a parent menu and the menu's current event is "mouse", The parent menu will have it's current child updated as well to help with transitioning between mouse and keyboard naviation.

Source:
Overrides:
See:
  • _currentChild

The index of the currently selected menu item in the menu.

  • Attempting to set a value less than -1 will set the current child to -1.
  • Attempting to set a value greater than or equal to the number of menu items will set the current child to the index of the last menu item in the menu.

If the current menu has a parent menu and the menu's current event is "mouse", The parent menu will have it's current child updated as well to help with transitioning between mouse and keyboard naviation.

Type:
  • number

focusState :string

Description:

  • The current state of the menu's focus.

    • If the menu has submenus, setting the focus state to "none" or "self" will update all child menus to have the focus state of "none".
    • If the menu has a parent menu, setting the focus state to "self" or "child" will update all parent menus to have the focus state of "child".
Source:
Overrides:
See:
  • _focusState

The current state of the menu's focus.

  • If the menu has submenus, setting the focus state to "none" or "self" will update all child menus to have the focus state of "none".
  • If the menu has a parent menu, setting the focus state to "self" or "child" will update all parent menus to have the focus state of "child".
Type:
  • string

currentEvent :string

Description:

  • The last event triggered on the menu.

Source:
Overrides:
See:
  • _currentEvent

The last event triggered on the menu.

Type:
  • string

currentMenuItem :BaseMenuItem

Description:

  • The currently selected menu item.

Source:
Overrides:

The currently selected menu item.

Type:

hoverType :string

Description:

  • The type of hoverability for the menu.

    This functions differently for root vs. submenus. Submenus will always inherit their root menu's hoverability.

Source:
Overrides:
See:
  • _hoverType

The type of hoverability for the menu.

This functions differently for root vs. submenus. Submenus will always inherit their root menu's hoverability.

Type:
  • string

hoverDelay :number

Description:

  • The delay time (in miliseconds) used for mouseout events to take place.

    This functions differently for root vs. submenus. Submenus will always inherit their root menu's hover delay.

Source:
Overrides:
See:
  • _hoverDelay

The delay time (in miliseconds) used for mouseout events to take place.

This functions differently for root vs. submenus. Submenus will always inherit their root menu's hover delay.

Type:
  • number

shouldFocus :boolean

Description:

  • A flag to check if the menu's focus methods should actually move the focus in the DOM.

    This will be false unless any of the following criteria are met:

    • The menu's current event is "keyboard".
    • The menu's current event is "character".
    • The menu's current event is "mouse" and the menu's hover type is "dynamic".
Source:
Overrides:

A flag to check if the menu's focus methods should actually move the focus in the DOM.

This will be false unless any of the following criteria are met:

  • The menu's current event is "keyboard".
  • The menu's current event is "character".
  • The menu's current event is "mouse" and the menu's hover type is "dynamic".
Type:
  • boolean

Methods

initialize()

Description:
Source:
Overrides:

(protected) _validate() → {boolean}

Description:

  • Validates all aspects of the menu to ensure proper functionality.

Source:
Overrides:
Returns:
  • The result of the validation.
Type
boolean

(protected) _handleClick()

Description:

  • Handles click events throughout the menu for proper use.

    • Adds all event listeners listed in BaseMenu's _handleClick method, and
    • adds a pointerup listener to the document so if the user clicks outside of the menu it will close if it is open.
Source:
Overrides:

(protected) _handleKeydown()

Description:

  • Handles keydown events throughout the menu for proper menu use.

    This method exists to assist the _handleKeyup method.

    • Adds all keydown listeners from BaseMenu's _handleKeydown method
    • Adds a keydown listener to the menu/all submenus.
      • Blocks propagation on the following keys: "Space", "Enter", and "Escape".
      • If optional keyboard support is enabled, blocks propagation on the following keys: "ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft", "Home", and "End".
Source:
Overrides:

(protected) _handleKeyup()

Description:

  • Handles keyup events throughout the menu for proper menu use.

    Adds all keyup listeners from BaseMenu's _handleKeyup method.

    Adds the following keybindings (explanations are taken from the WAI ARIA Pracitices Example Disclosure for Navigation Menus):

    Key Function
    Tab or Shift + Tab Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.
    Space or Enter
    • If focus is on a disclosure button, activates the button, which toggles the visibility of the dropdown.
    • If focus is on a link:
      • If any link has aria-current set, removes it.
      • Sets aria-current="page" on the focused link.
      • Activates the focused link.
    Escape If a dropdown is open, closes it and sets focus on the button that controls that dropdown.
    Down Arrow or Right Arrow (Optional})
    • If focus is on a button and its dropdown is collapsed, and it is not the last button, moves focus to the next button.
    • if focus is on a button and its dropdown is expanded, moves focus to the first link in the dropdown.
    • If focus is on a link, and it is not the last link, moves focus to the next link.
    Up Arrow or Left Arrow (Optional})
    • If focus is on a button, and it is not the first button, moves focus to the previous button.
    • If focus is on a link, and it is not the first link, moves focus to the previous link.
    Home (Optional})
    • If focus is on a button, and it is not the first button, moves focus to the first button.
    • If focus is on a link, and it is not the first link, moves focus to the first link.
    End (Optional})
    • If focus is on a button, and it is not the last button, moves focus to the last button.
    • If focus is on a link, and it is not the last link, moves focus to the last link.

    The optional keybindings are controlled by the menu's optionalKeySupport value.

Source:
Overrides:

(protected) _setDOMElementType(elementType, baseopt, overwriteopt)

Description:

  • Sets DOM elements within the menu.

    Elements that are not stored inside an array cannot be set through this method.

Source:
Overrides:
Parameters:
Name Type Attributes Default Description
elementType string

The type of element to populate.
base HTMLElement <optional>

The element used as the base for the querySelect.
overwrite boolean <optional>
 true

A flag to set if the existing elements will be overwritten.

(protected) _resetDOMElementType(elementType)

Description:

  • Resets DOM elements within the menu.

    Elements that are not stored inside an array cannot be reset through this method.

Source:
Overrides:
Parameters:
Name Type Description
elementType string

The type of element to clear.

(protected) _setDOMElements()

Description:
Source:
Overrides:

(protected) _findRootMenu(menu)

Description:

  • Finds the root menu element.

Source:
Overrides:
Parameters:
Name Type Description
menu BaseMenu

The menu to check.

(protected) _createChildElements()

Description:

  • Creates and initializes all menu items and submenus.

Source:
Overrides:

(protected) _handleFocus()

Description:

  • Handles focus events throughout the menu for proper menu use.

    • Adds a focus listener to every menu item so when it gains focus, it will set the item's containing menu's focus state to "self".
Source:
Overrides:

(protected) _handleHover()

Description:

  • Handles hover events throughout the menu for proper use.

    Adds pointerenter listeners to all menu items and pointerleave listeners to all submenu items which function differently depending on the menu's hover type.

    Before executing anything, the event is checked to make sure the event wasn't triggered by a pen or touch.

    Hover Type "on"

    • When a pointerenter event triggers on any menu item the menu's current child value will change to that menu item.
    • When a pointerenter event triggers on a submenu item the preview method for the submenu item's toggle will be called.
    • When a pointerleave event triggers on an open submenu item the close method for the submenu item's toggle will be called after a delay set by the menu's hover delay.

    Hover Type "dynamic"

    • When a pointerenter event triggers on any menu item the menu's current child value will change to that menu item.
    • When a pointerenter event triggers on any menu item, and the menu's focus state is not "none", the menu item will be focused.
    • When a pointerenter event triggers on a submenu item, and a submenu is already open, the preview method for the submenu item's toggle will be called.
    • When a pointerenter event triggers on a submenu item, and no submenu is open, no submenu-specific methods will be called.
    • When a pointerleave event triggers on an open submenu item that is not a root-level submenu item the close method for the submenu item's toggle will be called and the submenu item will be focused after a delay set by the menu's hover delay.
    • When a pointerleave event triggers on an open submenu item that is a root-level submenu item no submenu-specific methods will be called.

    Hover Type "off" All pointerenter and pointerleave events are ignored.

Source:
Overrides:

focus()

Description:

  • Focus the menu.

    Sets the menu's focus state to "self" and focusses the menu if the menu's shouldFocus value is true.

Source:
Overrides:

blur()

Description:

  • Unfocus the menu.

    Sets the menu's focus state to "none" and blurs the menu if the menu's shouldFocus vallue is true.

Source:
Overrides:

focusCurrentChild()

Description:

  • Focus the menu's current child.

Source:
Overrides:

focusChild(index)

Description:

  • Focuses the menu's child at a given index.

Source:
Overrides:
Parameters:
Name Type Description
index number

The index of the child to focus.

focusFirstChild()

Description:

  • Focues the menu's first child.

Source:
Overrides:

focusLastChild()

Description:

  • Focus the menu's last child.

Source:
Overrides:

focusNextChild()

Description:

  • Focus the menu's next child.

Source:
Overrides:

focusPreviousChild()

Description:

  • Focus the menu's previous child.

Source:
Overrides:

blurCurrentChild()

Description:

  • Blurs the menu's current child.

Source:
Overrides:

focusController()

Description:

  • Focus the menu's controller.

Source:
Overrides:

focusContainer()

Description:

  • Focus the menu's container.

Source:
Overrides:

closeChildren()

Description:

  • Close all submenu children.

Source:
Overrides:

blurChildren()

Description:

  • Blurs all children and submenu's children.

Source:
Overrides: