[DevTools] Add ARIA semantics for AXBreadcrumbs

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPane {
   /**
    * @param {!Accessibility.AccessibilitySidebarView} axSidebarView
    */
   constructor(axSidebarView) {
     super(Common.UIString('Accessibility Tree'));
 
     this.element.classList.add('ax-subpane');
+    UI.ARIAUtils.markAsTree(this.element);
 
     this._axSidebarView = axSidebarView;
 
     /** @type {?Accessibility.AXBreadcrumb} */
     this._preselectedBreadcrumb = null;
 
     this._selectedByUser = true;
 
     this._hoveredBreadcrumb = null;
     this._rootElement = this.element.createChild('div', 'ax-breadcrumbs');
@@ skipping 23 matching lines @@
     var ancestorChain = [];
     var ancestor = axNode;
     while (ancestor) {
       ancestorChain.push(ancestor);
       ancestor = ancestor.parentNode();
     }
     ancestorChain.reverse();
 
     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++;
     }
 
     var inspectedNodeBreadcrumb = breadcrumb;
     inspectedNodeBreadcrumb.setPreselected(true, this._selectedByUser);
 
     this._setPreselectedBreadcrumb(inspectedNodeBreadcrumb);
 
     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;
   }
 
   /**
    * @override
    */
   wasShown() {
     this._selectedByUser = true;
@@ skipping 26 matching lines @@
       handled = this._inspectDOMNode(this._preselectedBreadcrumb.axNode());
 
     if (handled)
       event.consume(true);
   }
 
   /**
    * @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;
   }
 
   /**
    * @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;
   }
 
   /**
    * @param {?Accessibility.AXBreadcrumb} breadcrumb
    */
   _setPreselectedBreadcrumb(breadcrumb) {
     if (breadcrumb === this._preselectedBreadcrumb)
       return;
     if (this._preselectedBreadcrumb)
       this._preselectedBreadcrumb.setPreselected(false, this._selectedByUser);
     this._preselectedBreadcrumb = breadcrumb;
     if (this._preselectedBreadcrumb)
       this._preselectedBreadcrumb.setPreselected(true, this._selectedByUser);
     else if (this._selectedByUser)
       SDK.OverlayModel.hideDOMNodeHighlight();
   }
 
   /**
    * @param {!Event} event
    */
   _onMouseLeave(event) {
     this._setHoveredBreadcrumb(null);
   }
 
   /**
    * @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;
     }
     var breadcrumb = breadcrumbElement.breadcrumb;
     if (breadcrumb.preselected() || breadcrumb.inspected() || !breadcrumb.isDOMNode())
       return;
     this._setHoveredBreadcrumb(breadcrumb);
   }
 
   /**
    * @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;
     }
     var breadcrumb = breadcrumbElement.breadcrumb;
     if (breadcrumb.inspected()) {
       // If the user is clicking the inspected breadcrumb, they probably want to
       // focus it.
       breadcrumb.element().focus();
       return;
@@ skipping 77 matching lines @@
 Accessibility.AXBreadcrumb = class {
   /**
    * @param {!Accessibility.AccessibilityNode} axNode
    * @param {number} depth
    * @param {boolean} inspected
    */
   constructor(axNode, depth, inspected) {
     /** @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);
 
+    /** @type !Array<!Accessibility.AXBreadcrumb> */
+    this._children = [];
     this._hovered = false;
     this._preselected = false;
+    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();
     } else {
       this._appendRoleElement(this._axNode.role());
       if (this._axNode.name() && this._axNode.name().value) {
         this._nodeWrapper.createChild('span', 'separator').textContent = '\u00A0';
         this._appendNameElement(/** @type {string} */ (this._axNode.name().value));
       }
     }
 
     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');
   }
 
   /**
    * @return {!Element}
    */
   element() {
     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}
    */
   preselected() {
     return this._preselected;
   }
 
   /**
    * @param {boolean} preselected
    * @param {boolean} selectedByUser
    */
   setPreselected(preselected, selectedByUser) {
     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
         SDK.OverlayModel.hideDOMNodeHighlight();
     }
   }
 
   /**
    * @param {boolean} hovered
    */
   setHovered(hovered) {
     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();
     }
   }
 
   /**
    * @return {!Accessibility.AccessibilityNode}
    */
   axNode() {
     return this._axNode;
   }
 
   /**
    * @return {boolean}
    */
   inspected() {
     return this._inspected;
   }
 
   /**
    * @return {boolean}
    */
   isDOMNode() {
     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
    */
   _appendNameElement(name) {
     var nameElement = createElement('span');
     nameElement.textContent = '"' + name + '"';
     nameElement.classList.add('ax-readable-string');
     this._nodeWrapper.appendChild(nameElement);
   }
 
   /**
@@ skipping 16 matching lines @@
     ignoredNodeElement.classList.add('ax-breadcrumbs-ignored-node');
     this._nodeWrapper.appendChild(ignoredNodeElement);
   }
 };
 
 /** @type {!Object<string, string>} */
 Accessibility.AXBreadcrumb.RoleStyles = {
   internalRole: 'ax-internal-role',
   role: 'ax-role',
 };