Improved accessibility of treeview control used in internal pages.

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

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('cr.ui', function() {
   // require cr.ui.define
   // require cr.ui.limitInputWidth
 
   /**
    * The number of pixels to indent per level.
@@ skipping 238 matching lines @@
    * This is used as a blueprint for new tree item elements.
    * @type {!HTMLElement}
    */
   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>' +
         '</div>' +
-        '<div class=tree-children></div>';
+        '<div class=tree-children role=group></div>';

[dpapad, 2016/08/03 20:31:19]

All those class= statements are missing quotes, should be

class="expand-icon"
class="tree-label"
class="tree-children"
role="group"

     treeItem.setAttribute('role', 'treeitem');
     return treeItem;
   })();
 
   /**
    * Creates a new tree item.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
    * @extends {HTMLElement}
    */
   var TreeItem = cr.ui.define(function() {
     var treeItem = treeItemProto.cloneNode(true);
     treeItem.id = 'tree-item-autogen-id-' + treeItemAutoGeneratedIdCounter++;
     return treeItem;
   });
 
   TreeItem.prototype = {
     __proto__: HTMLElement.prototype,
 
     /**
      * Initializes the element.
      */
     decorate: function() {
-
+      var labelId = 'tree-item-label-autogen-id-' +
+          treeItemAutoGeneratedIdCounter;
+      this.labelElement.id = labelId;
+      this.setAttribute('aria-labelledby', labelId);
     },
 
     /**
      * The tree items children.
      */
     get items() {
       return this.lastElementChild.children;
     },
 
     /**
@@ skipping 92 matching lines @@
     },
     set expanded(b) {
       if (this.expanded == b)
         return;
 
       var treeChildren = this.lastElementChild;
 
       if (b) {
         if (this.mayHaveChildren_) {
           this.setAttribute('expanded', '');
+          this.setAttribute('aria-expanded', 'true');
           treeChildren.setAttribute('expanded', '');
           cr.dispatchSimpleEvent(this, 'expand', true);
           this.scrollIntoViewIfNeeded(false);
         }
       } else {
         var tree = this.tree;
         if (tree && !this.selected) {
           var oldSelected = tree.selectedItem;
           if (oldSelected && this.contains(oldSelected))
             this.selected = true;
         }
         this.removeAttribute('expanded');
+        if (this.mayHaveChildren_) {

[dpapad, 2016/08/03 20:31:19]

Nit: No need for curly braces.

+          this.setAttribute('aria-expanded', 'false');
+        } else {
+          this.removeAttribute('aria-expanded');
+        }
         treeChildren.removeAttribute('expanded');
         cr.dispatchSimpleEvent(this, 'collapse', true);
       }
     },
 
     /**
      * Expands all parent items.
      */
     reveal: function() {
       var pi = this.parentItem;
@@ skipping 95 matching lines @@
     },
 
     /**
      * Whether the tree item has children.
      * @type {boolean}
      */
     set hasChildren(b) {
       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');
+      }
     },
 
     /**
      * Called when the user clicks on a tree item. This is forwarded from the
      * cr.ui.Tree.
      * @param {Event} e The click event.
      */
     handleClick: function(e) {
       if (e.target.className == 'expand-icon')
         this.expanded = !this.expanded;
@@ skipping 153 matching lines @@
     }
     return item;
   }
 
   // Export
   return {
     Tree: Tree,
     TreeItem: TreeItem
   };
 });