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);

[hhillen, 2017/02/05 21:41:11]

Screen readers are currently announcing "aa" for the expand / collapse
triangles. This is caused by the 'content' declaration in
ElementsTreeOutline.css (line 48):

elements-disclosure li.parent::before {
    -webkit-user-select: none;
    -webkit-mask-image: url(Images/treeoutlineTriangles.png);
    -webkit-mask-size: 32px 24px;
    content: "aa";
    color: transparent;
    text-shadow: none;
    margin-right: -3px;
}

Can we get rid of these characters?

[einbinder, 2017/02/07 21:12:58]

We should be able to replace them with content: '\00a0\00a0'

[hhillen, 2017/02/09 02:18:41]

Done

 
     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();
+      this._listItemNode.removeAttribute('aria-expanded');

[hhillen, 2017/02/05 21:41:11]

@einbinder Would you prefer a dedicated method in ARIAUtils for removing aria
related attributes?

[einbinder, 2017/02/07 21:12:57]

Yeah. It feels weird because expandable false is different from removing the
attribute. Let's do a dedicated method for now. I'll concede it is a point in
favor of just using raw aria attributes.

[hhillen, 2017/02/09 02:18:41]

Done

+    } 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 327 matching lines @@
     var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
     console.assert(paddingLeftValue.endsWith('px'));
     var computedLeftPadding = parseFloat(paddingLeftValue);
     var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
     return event.pageX >= left && event.pageX <= left + UI.TreeElement._ArrowToggleWidth && this._expandable;
   }
 };
 
 /** @const */
 UI.TreeElement._ArrowToggleWidth = 10;