Accessibility in EJ2 TypeScript Dropdown Tree control

14 Jan 20253 minutes to read

The Dropdown Tree control is designed with WAI-ARIA specifications in mind, implementing WAI-ARIA roles, states, and properties along with keyboard support. This control features full keyboard interaction support and ARIA accessibility that enhances usability for users of assistive technologies (AT) and those who rely entirely on keyboard navigation.

ARIA attributes

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

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 control 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.

The 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.