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.