2070909 - Screen readers announce no current item when focus enters a DevTools tree

Status: ASSIGNED

(DevTools :: Shared Components, defect)

Description

[Florian Quèze [:florian]]

Tree.js and VirtualizedTree.js in devtools/client/shared/components render a role="tree" container with tabindex="0" and manage item focus with aria-activedescendant, but build the attribute as focused && getKey(focused). It is absent until an item has been focused, so a screen reader entering the tree announces the tree and nothing else. Five debugger tests are skipped on the a11y-checks job with Node is not focusable via the accessibility API.

The same expression has two further defects. A falsy-but-valid item, such as a row keyed by trace index, short-circuits before getKey(). And node ids are minted as getKey(item, i), so where the index folds into the key the attribute names an id that is not in the document.

A patch in hand falls back to the first rendered node, tests focused != null, and emits the attribute only when the tree is given an onFocus.

Comment 1

[Florian Quèze [:florian]]

Attachment: Bug 2070909 - Name an active descendant on the DevTools trees that manage focus, r=#devtools-reviewers.

Tree.js and VirtualizedTree.js emitted aria-activedescendant only once an item
had been focused, so until then the tree was a tab stop with no current item.
Name the first rendered node, but only where the container passes onFocus:
without one nothing ever becomes focused, so claiming the pattern would hide a
keyboard defect rather than fix one. The attribute exempts these trees'
negative-tabindex rows from the keyboard-focusability check, which is what the
annotations removed here absorbed; they cite Bug 1849028 and Bug 1858041.