DevTools: Added ARIA roles & states to treeoutline

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 30 matching lines @@
     this._comparator = null;
 
     this.contentElement = this._rootElement._childrenListNode;
     this.contentElement.addEventListener('keydown', this._treeKeyDown.bind(this), true);
 
     this._focusable = true;
     this.setFocusable(this._focusable);
     if (this._focusable)
       this.contentElement.setAttribute('tabIndex', -1);
     this.element = this.contentElement;
+    UI.ARIAUtils.markAsTree(this.element);
 
     // Adjust to allow computing margin-left for the selection element.
     // Check the padding-left for the li element for correct value.
     this._paddingSize = 0;
   }
 
   _createRootElement() {
     this._rootElement = new UI.TreeElement();
     this._rootElement.treeOutline = this;
     this._rootElement.root = true;
@@ skipping 268 matching lines @@
     this._boundOnBlur = this._onBlur.bind(this);
 
     this._listItemNode = createElement('li');
     this._titleElement = this._listItemNode.createChild('span', 'tree-element-title');
     this._listItemNode.treeElement = this;
     if (title)
       this.title = title;
     this._listItemNode.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
     this._listItemNode.addEventListener('click', this._treeElementToggled.bind(this), false);
     this._listItemNode.addEventListener('dblclick', this._handleDoubleClick.bind(this), false);
+    UI.ARIAUtils.markAsTreeitem(this._listItemNode);
 
     this._childrenListNode = createElement('ol');
     this._childrenListNode.parentTreeElement = this;
     this._childrenListNode.classList.add('children');
+    UI.ARIAUtils.markAsGroup(this._childrenListNode);
 
     this._hidden = false;
     this._selectable = true;
     this.expanded = false;
     this.selected = false;
     this.setExpandable(expandable || false);
     this._collapsible = true;
   }
 
   /**
@@ skipping 345 matching lines @@
   /**
    * @param {boolean} expandable
    */
   setExpandable(expandable) {
     if (this._expandable === expandable)
       return;
 
     this._expandable = expandable;
 
     this._listItemNode.classList.toggle('parent', expandable);
-    if (!expandable)
+    if (!expandable) {
       this.collapse();
+      UI.ARIAUtils.unsetExpanded(this._listItemNode);
+    } else {
+      UI.ARIAUtils.setExpanded(this._listItemNode, false);
+    }
   }
 
   /**
    * @param {boolean} collapsible
    */
   setCollapsible(collapsible) {
     if (this._collapsible === collapsible)
       return;
 
     this._collapsible = collapsible;
@@ skipping 111 matching lines @@
   _detach() {
     this._listItemNode.remove();
     this._childrenListNode.remove();
   }
 
   collapse() {
     if (!this.expanded || !this._collapsible)
       return;
     this._listItemNode.classList.remove('expanded');
     this._childrenListNode.classList.remove('expanded');
+    UI.ARIAUtils.setExpanded(this._listItemNode, false);
     this.expanded = false;
     this.oncollapse();
     if (this.treeOutline)
       this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementCollapsed, this);
   }
 
   collapseRecursively() {
     var item = this;
     while (item) {
       if (item.expanded)
         item.collapse();
       item = item.traverseNextTreeElement(false, this, true);
     }
   }
 
   expand() {
     if (!this._expandable || (this.expanded && this._children))
       return;
 
     // Set this before onpopulate. Since onpopulate can add elements, this makes
     // sure the expanded flag is true before calling those functions. This prevents the possibility
     // of an infinite loop if onpopulate were to call expand.
 
     this.expanded = true;
 
     this._populateIfNeeded();
     this._listItemNode.classList.add('expanded');
     this._childrenListNode.classList.add('expanded');
+    UI.ARIAUtils.setExpanded(this._listItemNode, true);
 
     if (this.treeOutline) {
       this.onexpand();
       this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementExpanded, this);
     }
   }
 
   /**
    * @param {number=} maxDepth
    */
@@ skipping 336 matching lines @@
 UI.TreeElement._ArrowToggleWidth = 10;
 
 (function() {
   var img = new Image();
   if (window.devicePixelRatio > 1)
     img.src = 'Images/treeoutlineTriangles_2x.png';
   else
     img.src = 'Images/treeoutlineTriangles.png';
   UI.TreeElement._imagePreload = img;
 })();