Use aria-activedescendant properly.

This patch adds a proper id attribute to the tree nodes
so that the aria-activedescendant attribute links to an
actual element.

Author: nchevobbe

packages/devtools-components/src/tests/tree.js

@@ -66,17 +66,19 @@ describe("Tree", () => {
     expect(mountTree()).toBeTruthy();
   });
 
-  it("is accessible", () => {
-    const wrapper = mountTree();
+  it.only("is accessible", () => {
+    const wrapper = mountTree({
+      expanded: new Set("ABCDEFGHIJKLMNO".split("")),
+    });
     expect(wrapper.getDOMNode().getAttribute("role")).toBe("tree");
     expect(wrapper.getDOMNode().getAttribute("tabIndex")).toBe("0");
 
     getTreeNodes(wrapper)
-      .everyWhere(node => {
-        return typeof node.prop("id") !== "undefined"
-          && node.prop("role") === "treeitem"
-          && typeof node.prop("aria-level") !== "undefined";
-      });
+      .everyWhere(node => expect(
+        node.prop("id").startsWith("key-")
+        && node.prop("role") === "treeitem"
+        && typeof node.prop("aria-level") !== "undefined"
+      ).toBe(true));
   });
 
   it("renders as expected", () => {

packages/devtools-components/src/tree.js

@@ -46,6 +46,7 @@ const TreeNode = createFactory(createClass({
   displayName: "TreeNode",
 
   propTypes: {
+    id: PropTypes.any.isRequired,
     index: PropTypes.number.isRequired,
     depth: PropTypes.number.isRequired,
     focused: PropTypes.bool.isRequired,
@@ -65,6 +66,7 @@ const TreeNode = createFactory(createClass({
   render() {
     const {
       depth,
+      id,
       item,
       focused,
       expanded,
@@ -121,6 +123,7 @@ const TreeNode = createFactory(createClass({
 
     return dom.div(
       {
+        id,
         className: "tree-node" + (focused ? " focused" : ""),
         style: {
           paddingInlineStart,
@@ -697,8 +700,10 @@ const Tree = createClass({
 
     const nodes = traversal.map((v, i) => {
       const { item, depth } = traversal[i];
+      const key = this.props.getKey(item, i);
       return TreeNode({
-        key: this.props.getKey(item, i),
+        key,
+        id: key,
         index: i,
         item,
         depth,