DevTools: a11y of Elements/Accessibility Computed Properties pane

This change enables keyboard selection and navigation, as well as
screen reader, for the Computed Properties pane of the Accessibility
tool. Related nodes can now also be navigated-to by pressing the
<enter> key while these nodes are selected.

This change is a break-out and continuation of CL 1603344.

Screencap: https://imgur.com/a/tcipWNX
Change-Id: Id7702aa8c2d32cc0afe5215006db7f16b80af195
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1812105Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Robert Paveza <Rob.Paveza@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#704869}

third_party/blink/renderer/devtools/front_end/accessibility/AccessibilityNodeView.js

@@ -18,6 +18,7 @@ Accessibility.AXNodeSubPane = class extends Accessibility.AccessibilitySubPane {
 
     this.element.classList.add('accessibility-computed');
     this.registerRequiredCSS('accessibility/accessibilityNode.css');
+    this._treeOutline.setFocusable(true);
   }
 
   /**
@@ -94,6 +95,11 @@ Accessibility.AXNodeSubPane = class extends Accessibility.AccessibilitySubPane {
     for (const property of /** @type {!Array.<!Protocol.Accessibility.AXProperty>} */ (axNode.properties())) {
       addProperty(property);
     }
+
+    const firstNode = treeOutline.firstChild();
+    if (firstNode) {
+      firstNode.select(/* omitFocus= */ true, /* selectedByUser= */ false);
+    }
   }
 
   /**
@@ -280,7 +286,6 @@ Accessibility.AXNodePropertyTreePropertyElement = class extends Accessibility.AX
 
     this._property = property;
     this.toggleOnClick = true;
-    this.selectable = false;
 
     this.listItemElement.classList.add('property');
   }
@@ -314,7 +319,6 @@ Accessibility.AXValueSourceTreeElement = class extends Accessibility.AXNodePrope
   constructor(source, axNode) {
     super(axNode);
     this._source = source;
-    this.selectable = false;
   }
 
   /**
@@ -479,7 +483,7 @@ Accessibility.AXRelatedNodeSourceTreeElement = class extends UI.TreeElement {
 
     this._value = value;
     this._axRelatedNodeElement = new Accessibility.AXRelatedNodeElement(node, value);
-    this.selectable = false;
+    this.selectable = true;
   }
 
   /**
@@ -496,6 +500,14 @@ Accessibility.AXRelatedNodeSourceTreeElement = class extends UI.TreeElement {
           Protocol.Accessibility.AXValueType.ComputedString, this._value.text));
     }
   }
+
+  /**
+   * @override
+   */
+  onenter() {
+    this._axRelatedNodeElement.revealNode();
+    return true;
+  }
 };
 
 /**
@@ -535,6 +547,13 @@ Accessibility.AXRelatedNodeElement = class {
 
     return element;
   }
+
+  /**
+   * Attempts to cause the node referred to by the related node to be selected in the tree.
+   */
+  revealNode() {
+    this._deferredNode.resolvePromise().then(node => Common.Revealer.reveal(node));
+  }
 };
 
 /**