BaseMenuToggle

BaseMenuToggle

A link or button that controls the visibility of a BaseMenu.

Constructor

new BaseMenuToggle(options)

Description:

  • Constructs the menu toggle.

Source:
Parameters:
Name Type Description
options object

The options for generating the menu toggle.

Properties
Name Type Attributes Default Description
menuToggleElement HTMLElement

The toggle element in the DOM.
parentElement HTMLElement

The element containing the controlled menu.
controlledMenu BaseMenu

The menu controlled by this toggle.
parentMenu BaseMenu | null <optional>
 null

The menu containing this toggle.

Members

(protected) _dom :Object.<HTMLElement>

Description:

  • The DOM elements within the menu toggle.

Source:
Properties:
Name Type Description
toggle HTMLElement

The menu toggle.
parent HTMLElement

The menu containing this toggle.

The DOM elements within the menu toggle.

Type:
  • Object.<HTMLElement>

(protected) _elements :Object.<BaseMenu>

Description:

  • The declared accessible-menu elements within the menu toggle.

Source:
Properties:
Name Type Description
controlledMenu BaseMenu

The menu controlled by this toggle.
parentMenu BaseMenu

The menu containing this toggle.

The declared accessible-menu elements within the menu toggle.

Type:

(protected) _open :boolean

Description:

  • The open state of the menu toggle.

Source:

The open state of the menu toggle.

Type:
  • boolean

(readonly) dom :Object.<HTMLElement>

Description:

  • Get the DOM elements within the toggle.

Source:
See:
  • _dom

Get the DOM elements within the toggle.

Type:
  • Object.<HTMLElement>

(readonly) elements :Object.<BaseMenu>

Description:

  • Get the declared accessible-menu elements within the menu toggle.

Source:
See:
  • _elements

Get the declared accessible-menu elements within the menu toggle.

Type:

isOpen :boolean

Description:

  • Get the open state on the menu.

Source:
See:
  • _open

Get the open state on the menu.

Type:
  • boolean

Methods

initialize()

Description:

  • Initializes the menu toggle.

    Initialize does a lot of setup on the menu toggle.

    The most basic setup steps are to ensure that the toggle has aria-haspopup set to "true", aria-expanded initially set to "false" and, if the toggle element is not a <button>, set the role to "button".

    The next step to the initialization is to ensure both the toggle and the menu it controlls have IDs.

    If they do not, the following steps take place:

    • Generate a random 10 character string,
    • Get the innerText of the toggle,
    • Set the toggle's ID to: ${toggle-inner-text}-${the-random-string}-menu-button
    • Set the menu's ID to: ${toggle-inner-text}-${the-random-string}-menu

    Once the ID's have been generated, the menu's aria-labelledby is set to the toggle's ID, and the toggle's aria-controls is set to the menu's ID.

    Finally, the collapse method is called to make sure the submenu is closed.

Source:

(protected) _expand(emitopt)

Description:

  • Expands the controlled menu.

    Sets the toggle's aria-expanded to "true", adds the open class to the toggle's parent menu item and controlled menu, and removed the closed class from the toggle's parent menu item and controlled menu.

    If emit is set to true, this will also emit a custom event called accessibleMenuExpand

Source:
Parameters:
Name Type Attributes Default Description
emit boolean <optional>
 true

A toggle to emit the expand event once expanded.
Fires:

(protected) _collapse(emitopt)

Description:

  • Collapses the controlled menu.

    Sets the toggle's aria-expanded to "false", adds the closed class to the toggle's parent menu item and controlled menu, and removes the open class from the toggle's parent menu item and controlled menu.

    If emit is set to true, this will also emit a custom event called accessibleMenuCollapse

Source:
Parameters:
Name Type Attributes Default Description
emit boolean <optional>
 true

A toggle to emit the collapse event once collapsed.
Fires:

open()

Description:

  • Opens the controlled menu.

    Sets the controlled menu's focus state to "self" and the parent menu's focus state to "child", calls expand, and sets the isOpen value to true.

Source:

preview()

Description:

  • Opens the controlled menu without the current focus entering it.

    Sets the controlled menu's focus state to "self" and the parent menu's focus state to "child", and calls expand.

Source:

close()

Description:

  • Closes the controlled menu.

    Sets the controlled menu's focus state to "none" and the parent menu's focus state to "self", blurs the controlled menu and sets it's current child index to 0, calls collapse, and sets the isOpen value to false.

Source:

toggle()

Description:

  • Toggles the open state of the controlled menu between true and false.

Source:

closeSiblings()

Description:

  • Closes all sibling menus.

Source:

closeChildren()

Description:

  • Closes all child menus.

Source: