CODEWITHSUNDEEP
htmlaccessibility
smellyshovel
smellyshovel

Reputation: 225

ARIA Tree View Pattern - unclear keyboard navigation requirements: Arrow Down, Arrow Up, Home and End keys

The ARIA guidelines (https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) describe the following behavior for the Arrow Down, Arrow Up, Home and End keys:

Down Arrow: Moves focus to the next node that is focusable without opening or closing a node.

Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node.

Home: Moves focus to the first node in the tree without opening or closing a node.

End: Moves focus to the last node in the tree that is focusable without opening a node.

Questions:

  1. For the following case, on Arrow Down key press, the focus should be moved to the button or to the next <li> element? What do they understand by a "node"? A tree node (a tree item) or any focusable node, so that the button, which is a descendant of the item, should get the focus?

enter image description here

<ol>
  <li class="selectable" data-key="1" tabindex="0"><!--v-if--><span>1</span><!--v-if--></li>
  <li class="hasChildren" data-key="2" tabindex="0"><button tabindex="-1">-&gt;</button><span>2</span>
    <ol>
      <li class="" data-key="2.1" tabindex="0"><!--v-if--><strong>2.1 !!! </strong><!--v-if--></li>
      <li class="selectable" data-key="2.2" tabindex="0"><!--v-if--><span>2.2</span><!--v-if--></li>
      <li class="selectable" data-key="2.3" tabindex="0"><!--v-if--><span>2.3</span><!--v-if--></li>
    </ol>
  </li>
  <li class="hasChildren" data-key="3" tabindex="0"><button tabindex="-1">-&gt;</button><span>3</span>
    <ol class="">
      <li class="hasChildren" data-key="3.1" tabindex="0"><button tabindex="-1">-&gt;</button><span>3.1</span>
        <ol>
          <li class="selectable" data-key="3.1.1" tabindex="0"><!--v-if--><strong>3.1.1 !!! </strong><!--v-if--></li>
          <li class="selectable" data-key="3.1.2" tabindex="0"><!--v-if--><strong>3.1.2 !!! </strong><!--v-if--></li>
          <li class="selectable" data-key="3.1.3" tabindex="0"><!--v-if--><span>3.1.3</span><!--v-if--></li>
        </ol>
      </li>
      <li class="hasChildren" data-key="3.2" tabindex="0"><button tabindex="-1">-&gt;</button><span>3.2</span><!--v-if--></li>
      <li class="hasChildren" data-key="3.3" tabindex="0"><button tabindex="-1">-&gt;</button><span>3.3</span><!--v-if--></li>
    </ol>
  </li>
</ol>

  1. For the following case, pressing Home/End buttons should move focus to the first/last item in this list? Or in the root (top-level) list?

enter image description here

Bonus question: if, as per the spec, arrow down/up "moves focus to the next/previous node that is focusable", does it mean that when the keys are pressed while the very first/last (root) tree item is focus, then the focus should leave the tree altogether and move to a focusable element which goes after/before the tree?

Upvotes: 0

Views: 37

Answers (1)

QuentinC
QuentinC

Reputation: 14837

For the following case, on Arrow Down key press, the focus should be moved to the button or to the next <li> element? What do they understand by a "node"? A tree node (a tree item) or any focusable node, so that the button, which is a descendant of the item, should get the focus?

Normally, in the context of a tree view, tree item, tree node or simply node are all synonym. So up/down arrows should focus the previous/next <li> in your case.

As I understand your code, buttons are there to expand/collapse elements with the mouse or touch. They don't ever need to really take focus (hence your tabindex=-1 which looks correct, by the way). It's perfectly fine provided that right/left arrows allow to expand/collapse elements as well.

For the following case, pressing Home/End buttons should move focus to the first/last item in this list? Or in the root (top-level) list?

Home and end are normally expected to focus the very first/last item of the component.

For a tree view, the very first element is often the root, or the first level 1 child if the real unique root of the tree is hidden.

In your case, Home should thus focus the first <li>, the one with label "1", and End should focus "3.3" if we assume that item "3" is expanded.

Bonus question: if, as per the spec, arrow down/up "moves focus to the next/previous node that is focusable", does it mean that when the keys are pressed while the very first/last (root) tree item is focus, then the focus should leave the tree altogether and move to a focusable element which goes after/before the tree?

It happens sometimes, but it is generally not expected that up/down arrows make the focus leave the current component. Most often, when it happens, it's perceived as a bug or at least as a little annoyance.

If you want to really leave the tree component, you should normally press Tab or Shift+Tab.

Upvotes: 3

Related Questions