Example 1b: Author supplied values for aria-level, aria-setsize and aria-posinset

File Viewer

Keyboard Interaction and Focus Management

Key Function
Up arrow Key Moves focus to previous visible sibling treeitem using a depth first algorithm on the visible treeitems. If on first treeitem, focus stays on first treeitem.
Down arrow Key Moves focus to next visible sibling treeitem using a depth first algorithm on the visible treeitems. If on last treeitem, focus stays on the last treeitem.
Left Arrow Key
  • For a treeitem that is an end node (e.g. no child treeitems) or is in the collapsed state (e.g. has [aria-expanded=false]), focus moves to the parent treeitem. If a top level treeitem (e.g. parent is tree), focus stays on current treeitem.
  • For a treeitem that is in the expanded state (e.g. has [aria-expanded=true]) it toogles to the collapsed state. Focus remains on the current treeitem.
Right Arrow Key
  • For a treeitem that is an end node (e.g. no child treeitems) focus stays on current treeitem.
  • For a treeitem that is in the collapsed state (e.g. has [aria-expanded=false]) it toogles to the expanded state and focus moves to the first child treeitem. If no child, focus stays on current treeitem.
  • For a treeitem is in the expanded state, focus moves to the first child treeitem. If no child, focus stays on current treeitem.
Return Key Performs the default action (e.g. onclick event) on the current treeitem.
Space Key Performs the default action (e.g. onclick event) on the current treeitem.
Home Key Moves focus to first treeitem in the tree.
End Key Moves focus to last visible treeitem (e.g. depth first) in the tree.
a-z, A-Z
  • Moves focus to next visible treeitem that starts with letter character.
  • Search wraps to first treeitem if not found after current treeitem.
* Opens all the expandable treeitems in the current leaf (e.g. siblings of the current treeitem), keyboard focus does not change.