Improved accessibility of treeview control used in internal pages.

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

Index: ui/webui/resources/js/cr/ui/tree.js
diff --git a/ui/webui/resources/js/cr/ui/tree.js b/ui/webui/resources/js/cr/ui/tree.js
index aa9199e9c2dadd42a6aa61f2164e799bc15842ad..888fca654af1610b5b791fb7c5a2d1d68c2f49ef 100644
--- a/ui/webui/resources/js/cr/ui/tree.js
+++ b/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;

[dmazzoni, 2016/08/08 20:24:25]

I think you need to increment this?

+      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');
+      }
     },
 
     /**