Accessibility in Vue Drop down tree component

16 Mar 20243 minutes to read

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 users who use assistive technologies (AT) and those who completely rely on keyboard navigation.

ARIA attributes

The Dropdown Tree component uses the listbox role. 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 the 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 is expanded or not.
aria-selected Indicates the selected option.
aria-readonly Indicates the read only state of the Dropdown Tree element.
aria-disabled Indicates whether the Dropdown Tree component is in the 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.

Dropdown Tree supports the following keyboard shortcuts.

Interaction Keys Description
Alt + Down Opens the popup.
Alt + Up Closes the popup.
Esc(Escape) Closes the popup when it is in an open state.
Arrow Up Goes to the previous item in the popup.
Arrow Down Goes to the next item in the popup.
Arrow Right Expands the current item.
Arrow Left Collapses the current item in the popup.
Home Goes to the first item in the popup.
End Goes to the last item in the popup.
Enter Selects the focused item in the popup.
Space Checks the current item in the popup.