Toolbar
A toolbar following the W3C Toolbar pattern. https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
“Focusable” elements in the toolbar should have a tabindex="-1" and a data-role="toolbar-item" attribute to be able to
properly implement the “roving tabindex”
API Reference
Imports
HTML
<!-- Auto registers as <role-toolbar> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/role-components/exports/toolbar/toolbar-register.js"></script>
HTML
<script type="module">
// Auto registers as <role-toolbar>
import "https://cdn.jsdelivr.net/npm/role-components/exports/toolbar/toolbar-register.js"
// Manual Register
import RoleToolbar from "https://cdn.jsdelivr.net/npm/role-components/exports/toolbar/toolbar.js"
RoleToolbar.define()
// => Registers as <role-toolbar>
</script>
JavaScript
// Auto registers as <role-toolbar>
import "role-components/exports/toolbar/toolbar-register.js"
// Manual Register
import RoleToolbar "role-components/exports/toolbar/toolbar.js"
RoleToolbar.define()
// => Registers as <role-toolbar>
Attributes
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
[Attribute + Property]
_currentFocusIndex
|
-
|
|
number
|
0
|
[Attribute + Property]
orientation
|
-
|
|
"vertical" | "horizontal"
|
"horizontal"
|
[Attribute + Property]
_toolbarItems
|
-
|
|
Array<Element>
|
[]
|
[Attribute + Property]
ariaOrientation
|
-
|
|
-
|
-
|
Functions
| Name | Description | Parameters |
|---|---|---|
handleClick()
|
-
|
event: Event
|
handleKeyDown()
|
-
|
event: KeyboardEvent
|
focusNext()
|
-
|
_event: Event
|
focusPrevious()
|
-
|
_event: Event
|
focusFirst()
|
-
|
-
|
focusLast()
|
-
|
-
|
setTabIndex()
|
-
|
{ focus = true }
|
updateToolbarItems()
|
-
|
evt: undefined | null | Event
|
debounce()
|
-
|
callback: (...args: any[]) => any, options: { key: any, wait: number }
|