Accessibility in Vue Dropdown Tree component

The Dropdown Tree component has been designed keeping in mind the WAI-ARIA specifications, and applies WAI-ARIA roles, states, and properties along with keyboard support. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation.

ARIA attributes

The Dropdown Tree component uses the listbox role, and each tree parent item in the popup has group role and each item in the popup has treeitem role. The following ARIA attributes are used in Dropdown Tree component:

Properties

Functionalities

aria-haspopup

Indicates whether the Dropdown Tree input element has a popup list or not.

aria-expanded

Indicates whether the popup list has expanded or not.

aria-selected

Indicates the selected option.

aria-readonly

Indicates the readonly state of the Dropdown Tree element.

aria-disabled

Indicates whether the Dropdown Tree component is in a disabled state or not.

aria-activedescendent

This attribute holds the ID of the active list item to focus its descendant child element.

aria-owns

This attribute contains the ID of the popup list to indicate popup as a child element.

Keyboard interaction

The Dropdown Tree functionalities can be interactive when keyboard shortcuts are used.