Class for independently revealing and hiding inline content.
new Disclosure(element: HTMLElement, options: object);element - (Required) Either the element used to activate the Disclosure target, or the Disclosure target element.
The activating element is required to have an aria-controls attribute with a value matching the id attribute value of the target element; vice-versa for the target element. The component's events will dispatch from this element.
options - (Optional) Configuration options.
modules - A single module, or array of modules, to initialize. Default is []
Global methods and properties documented at src/README.
open() - Shortcut for disclosure.expanded = true.
close() - Shortcut for disclosure.expanded = false.
toggle() - Shortcut for reversing expanded state.
toString() - Returns '[object Disclosure]'.
expanded - (setter) Set the component state and update element attributes to show-to or hide-from assistive technology.
expanded - (getter) Get the component state.
controller - The Disclosure's activating element.
target - The Disclosure's target element.
Events are namespaced by their component to avoid clashes with nested components.
'disclosure.init'
Fired after the component is initialized.
event.detail.instance - The class instance from which the event originated.
'disclosure.stateChange'
Fired after component state is updated.
event.detail.instance - The class instance from which the event originated.
event.detail.expanded - The current expanded component state.
'disclosure.destroy'
Fired after the component is destroyed.
event.detail.instance - The class instance from which the event originated.
event.detail.element - The element passed to the constructor.
Full modules documentation at src/shared/modules/.
import Disclosure, { ManageTabIndex } from 'aria-components/disclosure';ComponentConnector
Forces tab focus between a controller and target pair when they are not adjacent siblings.
ManageTabIndex
Removes the target element's interactive children from the tab index when the target is hidden.
UseButtonRole
Mimics a button for non-button controllers by using role=button and mapping the Space and Enter keys to click events
UseHiddenAttribute
Hides the target element with the hidden attribute, removing the need to do it with CSS. Note that the use of the hidden attribute can hinder animations.
Previously, there existsed a loadOpen option for initializing a Disclosure in the expanded state. To achieve the same result: Add aria-expanded="true" to the controling element and aria-hidden="false" to the target element.