[DevTools] Add ARIA semantics for AXBreadcrumbs

third_party/WebKit/Source/devtools/front_end/accessibility/AXBreadcrumbsPane.js

Index: third_party/WebKit/Source/devtools/front_end/accessibility/AXBreadcrumbsPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/accessibility/AXBreadcrumbsPane.js b/third_party/WebKit/Source/devtools/front_end/accessibility/AXBreadcrumbsPane.js
index 417b495aa73cba14e71445692766f10299fcfc38..59cc3f309b74734b461526dc1527af232feb4510 100644
--- a/third_party/WebKit/Source/devtools/front_end/accessibility/AXBreadcrumbsPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/accessibility/AXBreadcrumbsPane.js
@@ -10,6 +10,7 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
     super(Common.UIString('Accessibility Tree'));
 
     this.element.classList.add('ax-subpane');
+    UI.ARIAUtils.markAsTree(this.element);
 
     this._axSidebarView = axSidebarView;
 
@@ -53,11 +54,14 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
 
     var depth = 0;
     var breadcrumb = null;
+    var parent = null;
     for (ancestor of ancestorChain) {
       breadcrumb = new Accessibility.AXBreadcrumb(ancestor, depth, (ancestor === axNode));
-      if (ancestor.children().length)
-        breadcrumb.element().classList.add('parent');
-      this._rootElement.appendChild(breadcrumb.element());
+      if (parent)
+        parent.appendChild(breadcrumb);
+      else
+        this._rootElement.appendChild(breadcrumb.element());
+      parent = breadcrumb;
       depth++;
     }
 
@@ -68,7 +72,7 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
 
     for (var child of axNode.children()) {
       var childBreadcrumb = new Accessibility.AXBreadcrumb(child, depth, false);
-      this._rootElement.appendChild(childBreadcrumb.element());
+      inspectedNodeBreadcrumb.appendChild(childBreadcrumb);
     }
 
     this._selectedByUser = false;
@@ -115,11 +119,11 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
    * @return {boolean}
    */
   _preselectPrevious() {
-    var previousElement = this._preselectedBreadcrumb.element().previousSibling;
-    if (!previousElement)
+    var previousBreadcrumb = this._preselectedBreadcrumb.previousBreadcrumb();
+    if (!previousBreadcrumb)
       return false;
     this._selectedByUser = true;
-    this._setPreselectedBreadcrumb(previousElement.breadcrumb);
+    this._setPreselectedBreadcrumb(previousBreadcrumb);
     return true;
   }
 
@@ -127,11 +131,11 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
    * @return {boolean}
    */
   _preselectNext() {
-    var nextElement = this._preselectedBreadcrumb.element().nextSibling;
-    if (!nextElement)
+    var nextBreadcrumb = this._preselectedBreadcrumb.nextBreadcrumb();
+    if (!nextBreadcrumb)
       return false;
     this._selectedByUser = true;
-    this._setPreselectedBreadcrumb(nextElement.breadcrumb);
+    this._setPreselectedBreadcrumb(nextBreadcrumb);
     return true;
   }
 
@@ -161,7 +165,7 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
    * @param {!Event} event
    */
   _onMouseMove(event) {
-    var breadcrumbElement = event.target.enclosingNodeOrSelfWithClass('ax-node');
+    var breadcrumbElement = event.target.enclosingNodeOrSelfWithClass('ax-breadcrumb');
     if (!breadcrumbElement) {
       this._setHoveredBreadcrumb(null);
       return;
@@ -176,7 +180,7 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
    * @param {!Event} event
    */
   _onClick(event) {
-    var breadcrumbElement = event.target.enclosingNodeOrSelfWithClass('ax-node');
+    var breadcrumbElement = event.target.enclosingNodeOrSelfWithClass('ax-breadcrumb');
     if (!breadcrumbElement) {
       this._setHoveredBreadcrumb(null);
       return;
@@ -249,22 +253,31 @@ Accessibility.AXBreadcrumb = class {
     /** @type {!Accessibility.AccessibilityNode} */
     this._axNode = axNode;
 
-    this._element = createElementWithClass('div', 'ax-node');
+    this._element = createElementWithClass('div', 'ax-breadcrumb');
+    UI.ARIAUtils.markAsTreeitem(this._element);
     this._element.breadcrumb = this;
 
+    this._nodeElement = createElementWithClass('div', 'ax-node');
+    this._element.appendChild(this._nodeElement);
+    this._nodeWrapper = createElementWithClass('div', 'wrapper');
+    this._nodeElement.appendChild(this._nodeWrapper);
+
     this._selectionElement = createElementWithClass('div', 'selection fill');
-    this._element.appendChild(this._selectionElement);
+    this._nodeElement.appendChild(this._selectionElement);
 
-    this._nodeWrapper = createElementWithClass('span', 'wrapper');
-    this._element.appendChild(this._nodeWrapper);
+    this._childrenGroupElement = createElementWithClass('div', 'children');
+    UI.ARIAUtils.markAsGroup(this._childrenGroupElement);
+    this._element.appendChild(this._childrenGroupElement);
 
     this._hovered = false;
     this._preselected = false;
+    this._children = [];

[lushnikov, 2017/07/06 15:49:09]

let's add jsdoc for this

[aboxhall, 2017/07/06 22:14:14]

Done.

+    this._parent = null;
 
     this._inspected = inspected;
-    this.element().classList.toggle('inspected', inspected);
+    this._nodeElement.classList.toggle('inspected', inspected);
 
-    this._element.style.paddingLeft = (16 * depth + 4) + 'px';
+    this._nodeElement.style.paddingLeft = (16 * depth + 4) + 'px';
 
     if (this._axNode.ignored()) {
       this._appendIgnoredNodeElement();
@@ -277,10 +290,10 @@ Accessibility.AXBreadcrumb = class {
     }
 
     if (this._axNode.hasOnlyUnloadedChildren())
-      this._element.classList.add('children-unloaded');
+      this._nodeElement.classList.add('children-unloaded');
 
     if (!this._axNode.isDOMNode())
-      this._element.classList.add('no-dom-node');
+      this._nodeElement.classList.add('no-dom-node');
   }
 
   /**
@@ -290,6 +303,24 @@ Accessibility.AXBreadcrumb = class {
     return this._element;
   }
 
+  /**
+   * @param {!Accessibility.AXBreadcrumb} breadcrumb
+   */
+  appendChild(breadcrumb) {
+    this._children.push(breadcrumb);
+    breadcrumb.setParent(this);
+    this._nodeElement.classList.add('parent');
+    UI.ARIAUtils.setExpanded(this._element, true);
+    this._childrenGroupElement.appendChild(breadcrumb.element());
+  }
+
+  /**
+   * @param {!Accessibility.AXBreadcrumb} breadcrumb
+   */
+  setParent(breadcrumb) {
+    this._parent = breadcrumb;
+  }
+
   /**
    * @return {boolean}
    */
@@ -305,14 +336,14 @@ Accessibility.AXBreadcrumb = class {
     if (this._preselected === preselected)
       return;
     this._preselected = preselected;
-    this.element().classList.toggle('preselected', preselected);
+    this._nodeElement.classList.toggle('preselected', preselected);
     if (preselected)
-      this.element().setAttribute('tabIndex', 0);
+      this._nodeElement.setAttribute('tabIndex', 0);
     else
-      this.element().removeAttribute('tabIndex');
+      this._nodeElement.removeAttribute('tabIndex');
     if (this._preselected) {
       if (selectedByUser)
-        this.element().focus();
+        this._nodeElement.focus();
       if (!this._inspected)
         this._axNode.highlightDOMNode();
       else
@@ -327,9 +358,9 @@ Accessibility.AXBreadcrumb = class {
     if (this._hovered === hovered)
       return;
     this._hovered = hovered;
-    this.element().classList.toggle('hovered', hovered);
+    this._nodeElement.classList.toggle('hovered', hovered);
     if (this._hovered) {
-      this.element().classList.toggle('hovered', true);
+      this._nodeElement.classList.toggle('hovered', true);
       this._axNode.highlightDOMNode();
     }
   }
@@ -355,6 +386,29 @@ Accessibility.AXBreadcrumb = class {
     return this._axNode.isDOMNode();
   }
 
+  /**
+   * @return {?Accessibility.AXBreadcrumb}
+   */
+  nextBreadcrumb() {
+    if (this._children.length)
+      return this._children[0];
+    var nextSibling = this.element().nextSibling;
+    if (nextSibling)
+      return nextSibling.breadcrumb;
+    return null;
+  }
+
+  /**
+   * @return {?Accessibility.AXBreadcrumb}
+   */
+  previousBreadcrumb() {
+    var previousSibling = this.element().previousSibling;
+    if (previousSibling)
+      return previousSibling.breadcrumb;
+
+    return this._parent;
+  }
+
   /**
    * @param {string} name
    */