DevTools: Added ARIA roles & states to treeoutline

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

Index: third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
index f044821e2059c05596dc68e98919d189a46aa7e6..dfa62e07cbc35016c4d0ad64bbd4dda8621fa517 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
@@ -48,6 +48,7 @@ UI.TreeOutline = class extends Common.Object {
     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.
@@ -336,10 +337,12 @@ UI.TreeElement = class {
     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;
@@ -705,8 +708,12 @@ UI.TreeElement = class {
     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);
+    }
   }
 
   /**
@@ -838,6 +845,7 @@ UI.TreeElement = class {
       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)
@@ -866,6 +874,7 @@ UI.TreeElement = class {
     this._populateIfNeeded();
     this._listItemNode.classList.add('expanded');
     this._childrenListNode.classList.add('expanded');
+    UI.ARIAUtils.setExpanded(this._listItemNode, true);
 
     if (this.treeOutline) {
       this.onexpand();