Improved accessibility of treeview control used in internal pages.

1. Added accessibility label for each tree item. Without it the accessible label was automatically computed by concatenating the text in all the children: a non-sensical output.
2. Added group role for children which enables screen readers to announce the current level in the tree.
3. Added aria-expanded for tree items with children.
R=dmazzoni@chromium.org, thakis@chromium.org
TESTED=Manually with Jaws and NVDA
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2201033004
Cr-Commit-Position: refs/heads/master@{#410414}

ui/webui/resources/js/cr/ui/tree.js

@@ -252,11 +252,11 @@ cr.define('cr.ui', function() {
   var treeItemProto = (function() {
     var treeItem = cr.doc.createElement('div');
     treeItem.className = 'tree-item';
-    treeItem.innerHTML = '<div class=tree-row>' +
-        '<span class=expand-icon></span>' +
-        '<span class=tree-label></span>' +
+    treeItem.innerHTML = '<div class="tree-row">' +
+        '<span class="expand-icon"></span>' +
+        '<span class="tree-label"></span>' +
         '</div>' +
-        '<div class=tree-children></div>';
+        '<div class="tree-children" role="group"></div>';
     treeItem.setAttribute('role', 'treeitem');
     return treeItem;
   })();
@@ -280,7 +280,10 @@ cr.define('cr.ui', function() {
      * Initializes the element.
      */
     decorate: function() {
-
+      var labelId = 'tree-item-label-autogen-id-' +
+          treeItemAutoGeneratedIdCounter;
+      this.labelElement.id = labelId;
+      this.setAttribute('aria-labelledby', labelId);
     },
 
     /**
@@ -393,6 +396,7 @@ cr.define('cr.ui', function() {
       if (b) {
         if (this.mayHaveChildren_) {
           this.setAttribute('expanded', '');
+          this.setAttribute('aria-expanded', 'true');
           treeChildren.setAttribute('expanded', '');
           cr.dispatchSimpleEvent(this, 'expand', true);
           this.scrollIntoViewIfNeeded(false);
@@ -405,6 +409,10 @@ cr.define('cr.ui', function() {
             this.selected = true;
         }
         this.removeAttribute('expanded');
+        if (this.mayHaveChildren_)
+          this.setAttribute('aria-expanded', 'false');
+        else
+          this.removeAttribute('aria-expanded');
         treeChildren.removeAttribute('expanded');
         cr.dispatchSimpleEvent(this, 'collapse', true);
       }
@@ -520,8 +528,10 @@ cr.define('cr.ui', function() {
       var rowItem = this.firstElementChild;
       this.setAttribute('has-children', b);
       rowItem.setAttribute('has-children', b);
-      if (b)
+      if (b) {
         this.mayHaveChildren_ = true;
+        this.setAttribute('aria-expanded', 'false');
+      }
     },
 
     /**