Other
Toggle
Toggle

Accessibility

This components follows A11y standards so aria attributes and keyboard interactions are managed automatically.

	Syntax	Default / Arguments	Description
Option	`a11y:Object\|false`	`<Object>`	Aria options
Option	`a11y.role:String\|false`	`false`	Inject `role` and related attributes, can be `'popup'`, `'dialog'`, `'tooltip'`, `'carousel'`, also if has container and targets and no divs between `'tablist'`, `'menu'`, `'listbox'`
Option	`a11y.labelElements:Boolean`	`false`	Inject `aria-labelledby` attributes on elements (linking to targets)
Option	`a11y.labelTargets:Boolean`	`true`	Inject `aria-labelledby` attributes on targets (linking to elements)
Option	`a11y.controls:Boolean`	`true`	Inject `aria-controls` attributes
Option	`a11y.selected:Boolean`	`true`	Inject `aria-selected` attributes
Option	`a11y.expanded:Boolean`	`false`	Inject `aria-expanded` attributes
Option	`a11y.live:Boolean`	`true`	Inject `aria-live` attributes on auto
Option	`a11y.disabled:Boolean`	`true`	Inject `aria-disabled` attributes on enable/disable
Option	`a11y.keyboard:Boolean`	`true`	Automatic keyboard next, previous and exit interactions
Option	`a11y.vertical:Boolean`	`false`	Vertical arrows instead of horizontal for keyboard events
Option	`a11y.items:String\|false`	`false`	Navigate activated target with arrows and search when typing

Do not rely/use aria attributes, they are generated and they can change anytime.

If you want to disable the component use the options.disabled.

	Syntax	Default / Arguments	Description
Option	`disabled:Boolean`	`false`	Disable the component
Option	`disableDeactivate:Boolean`	`false`	Deactivate automatically on disable and destroy

With nested selectors change the elements and targets query.

Example of component disabled on desktop with match media.

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

	Syntax	Default / Arguments	Description
Option	`matches:Object`	`false`	Add additional options on match media query

If you want to animate on image loaded, with mediaLoaded: true use the class .xt-medialoaded or the js event medialoaded.xt.toggle.

When you need to reinit the component when the media is loaded and the width of the image is calculated with mediaLoadedReinit: true.

	Syntax	Default / Arguments	Description
Option	`mediaLoaded:Boolean`	`false`	Add the class `.xt-medialoaded` on img loaded
Option	`mediaLoadedReinit:Boolean`	`false`	Reinit the component on img loaded after Xt.medialoadedDelay

Use this code to create a toggle that resets to current automatically on deactivation.

You can automatically move targets on activation inside the DOM.

	Syntax	Default / Arguments	Description
Option	`appendTo:Query`	`false`	Automatically append targets to Node on activation

For accessibility purpose on activation you can limit the focus inside the current activated targets.

	Syntax	Default / Arguments	Description
Option	`focusLimit:Boolean`	`false`	Automatically limit focus on activation inside current targets
Option	`focusTrap:Object`	`{ initialFocus: false, preventScroll: true, allowOutsideClick: true }`	Options to pass to Focus Trap

On sequential activation you can automatically set zIndex of activated elements and targets.

It's better to keep the start value like the css one, but you can change the factor on activation.

	Syntax	Default / Arguments	Description
Option	`zIndex:Object\|false`	`false`	Set `z-index` on activation, e.g.: `{ targets: { start: 600, factor: -1 } },` can be `elements`, `targets`, `elementsInner`, `targetsInner`

	Syntax	Default / Arguments	Description
Option	`debug:Boolean`	`false`	Debug on console
Option	`visibleReinit:Boolean`	`false`	Reinit when `self.container` becomes visible with `display` only one time and only if not already visible