CODEWITHSUNDEEP
htmlaccessibility
smellyshovel
smellyshovel

Reputation: 225

ARIA Tree View Pattern - how to handle (in terms of keyboard navigation) items' nested controls?

Here's some basic HTML tree:

  <ol>
    <li>First item. No descendants <button>Menu</button></li>
    <li>
      Second item with sub-items <button>Menu</button>

      <ol>
        <li>Second item, first sub-item <button>Menu</button></li>
        <li>Second item, second sub-item <button>Menu</button></li>
        <li>Second item, third sub-item <button>Menu</button></li>
      </ol>
    </li>
    <li>Third (no descendants) item <button>Menu</button></li>
  </ol>

It's currently missing any accessibility-related attributes, but it's not the point.

On this page there's a list of required keyboard interactions for a tree list, however, I don't see there how I should handle (if I should at all) additional interactive items' controls, which are part of every (or at least some) tree items.

To be more specific, it's a pretty common situation to have a "Menu" button to the right of every file/folder name in a file tree to be able to perform some operations on these files/folders (e.g. copying and deleting). However, ARIA basically says the following: if an item is focused, then Left/Right arrows navigate the items horizontally, and Up/Down arrows navigate it vertically. Also, the Tab (or Shift+Tab) combinations are reserved for leaving the tree to either direction.

So, the question is: if that's even permitted to have in items something other than just their label, and especially to have interactive controls like buttons, then how should they (if at all) recieve focus when the user is using the keyboard for interaction?

Upvotes: 0

Views: 12

Answers (0)

Related Questions