BaseMenuToggle
A link or button that controls the visibility of a BaseMenu.
Constructor
Constructs a new BaseMenuToggle
new BaseMenuToggle({
menuToggleElement,
parentElement,
controlledMenu,
parentMenu,
});The constructor populates the dom and elements properties. It will not initialize the menu toggle; this is left to the subclasses to evoke.
Parameters
| Name | Type | Description | Default |
|---|---|---|---|
| options | object | The options for generating the menu toggle. | undefined |
| options.menuToggleElement | HTMLElement | The toggle element in the DOM. | undefined |
| options.parentElement | HTMLElement | The element containing the controlled menu. | undefined |
| options.controlledMenu | BaseMenu | The menu controlled by this toggle. | undefined |
| options.parentMenu | BaseMenu, null | The menu containing this toggle. | null |
Initialize
Initializes the menu toggle.
BaseMenuToggle.initialize();The first steps are to ensure that the toggle and controlled menu have IDs using the setIds method, and to set the ARIA attributes on the toggle and controlled menu using the setAriaAttributes method.
Then the collapse method is called to make sure the submenu is closed.
Properties
_dom protected
The DOM elements within the menu toggle.
BaseMenuToggle._dom;Type
Object<HTMLElement>
Properties
| Name | Type | Description | Default |
|---|---|---|---|
| toggle | HTMLElement | The menu toggle. | null |
| parent | HTMLElement | The menu containing this toggle. | null |
_elements protected
The declared accessible-menu elements within the menu toggle.
BaseMenuToggle._elements;Type
Object<BaseMenu>
Properties
| Name | Type | Description | Default |
|---|---|---|---|
| controlledMenu | BaseMenu | The menu controlled by this toggle. | null |
| parentMenu | BaseMenu | The menu containing this toggle. | null |
_open protected
The open state of the menu toggle.
BaseMenuToggle._open; // Default: `false`.Type
boolean
_expandEvent protected
The event that is triggered when the menu toggle expands.
BaseMenuToggle._expandEvent;Type
CustomEvent
Properties
| Name | Type | Description | Default |
|---|---|---|---|
| bubbles | boolean | A flag to bubble the event. | true |
| detail | Object<BaseMenuToggle> | The details object containing the BaseMenuToggle itself. | { toggle: this } |
_collapseEvent protected
The event that is triggered when the menu toggle collapses.
BaseMenuToggle._collapseEvent;Type
CustomEvent
Properties
| Name | Type | Description | Default |
|---|---|---|---|
| bubbles | boolean | A flag to bubble the event. | true |
| detail | Object<BaseMenuToggle> | The details object containing the BaseMenuToggle itself. | { toggle: this } |
Getters and Setters
dom readonly
The DOM elements within the toggle.
BaseMenuToggle.dom;See _dom for more information.
elements readonly
The declared accessible-menu elements within the toggle.
BaseMenuToggle.elements;See _elements for more information.
isOpen
The open state of the toggle.
BaseMenuToggle.isOpen;BaseMenuToggle.isOpen = true;See _open for more information.
Methods
_setIds protected
Sets unique IDs for the toggle and controlled menu.
BaseMenuToggle._setIds();If the toggle and controlled menu do not have IDs, the following steps take place:
- Generate a random string 1-10 characters long,
- Get the innerText of the toggle,
- Set the toggle's ID to:
menu-button-${toggle-inner-text}-${the-random-string} - Set the menu's ID to:
menu-${toggle-inner-text}-${the-random-string}
_setAriaAttributes protected
Sets the ARIA attributes on the toggle and controlled menu.
BaseMenuToggle._setAriaAttributes();The first steps are to ensure that the toggle has aria-expanded is initially set to "false".
Then using the toggle and menu's IDs, the menu's aria-labelledby is set to the toggle's ID.
_expand protected
Expands the controlled menu.
BaseMenuToggle._expand(emit);Sets the toggle's aria-expanded to "true", adds the open class to the toggle's parent menu item and controlled menu, and removes 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.
Parameters
| Name | Type | Description | Default |
|---|---|---|---|
| emit | boolean | A toggle to emit the expand event once expanded. | true |
_collapse protected
Collapses the controlled menu.
BaseMenuToggle._collapse(emit);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.
Parameters
| Name | Type | Description | Default |
|---|---|---|---|
| emit | boolean | A toggle to emit the collapse event once collapsed. | true |
open public
Opens the controlled menu.
BaseMenuToggle.open();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.
preview public
Opens the controlled menu without the current focus entering it.
BaseMenuToggle.preview();Sets the controlled menu's focus state to "self" and the parent menu's focus state to "child", and calls _expand.
close public
Closes the controlled menu.
BaseMenuToggle.close();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 currentChild to 0, calls _collapse, and sets the isOpen value to false.
toggle public
Toggles the open state of the controlled menu between true and false.
BaseMenuToggle.toggle();closeSiblings public
Closes all sibling menus.
BaseMenuToggle.closeSiblings();closeChildren public
Closes all child menus.
BaseMenuToggle.closeChildren();