Accessibility in Vue Toolbar component

The Toolbar component has been designed, keeping in mind the WAI-ARIA specifications, and
applying the WAI-ARIA roles, states, and properties along with keyboard support for people who use assistive devices. WAI-ARIA accessibility
support is achieved through attributes like aria-orientation, aria-disabled, and aria-haspopup. It provides
information about elements in a document for assistive technology. The component implements keyboard navigation support by following the
WAI-ARIA practices,
and has been tested in major screen readers.

ARIA attributes

The Toolbar element is assigned the role of toolbar.

Property

Functionalities

role=“toolbar”

This attribute added to the ToolBar element describes the actual role of the element.

aria-orientation

Indicates the ToolBar orientation. Default value is horizontal.

aria-haspopup

Indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to true.

aria-disabled

Indicates the disabled state of the ToolBar.

Keyboard interaction

Keyboard navigation is enabled, by default. Possible keys are:

Key

Description

Left

Focuses the previous element.

Right

Focuses the next element.

Enter

When focused on a ToolBar command, clicking the key triggers the click of Toolbar element. When popup drop-down icon is focused, the popup opens.