Improve accessibility of user image selection screen.

chrome/browser/resources/shared/js/cr/ui/list.js

Index: chrome/browser/resources/shared/js/cr/ui/list.js
diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js
index 7a23cb56837942d8c0faa337452becf8a6a5a98a..eb412567ba648fd85980d3bb9f787386654b0829 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list.js
@@ -91,6 +91,20 @@ cr.define('cr.ui', function() {
     itemConstructor_: cr.ui.ListItem,
 
     /**
+     * The prefix to use when giving each item a unique id.
+     * @type {string}
+     * @private
+     */
+    uniqueIdPrefix_: 'list',
+
+    /**
+     * The next id suffix to use when giving each item an unique id.
+     * @type {number}
+     * @private
+     */
+    nextUniqueIdSuffix_: 0,

[Ivan Korotkov, 2012/08/03 01:00:23]

Don't put them into prototype: that makes them shared across all List objects.
Instead, you can assign them in constructor or on the first usage at all.

[dmazzoni, 2012/08/03 22:59:01]

Moved to decorate(), or did you have something else in mind?

[Ivan Korotkov, 2012/08/03 23:19:37]

decorate is OK

+
+    /**
      * Function used to create grid items.
      * @type {function(): !ListItem}
      */
@@ -319,7 +333,7 @@ cr.define('cr.ui', function() {
       this.addEventListener('focus', this.handleElementFocus_, true);
       this.addEventListener('blur', this.handleElementBlur_, true);
       this.addEventListener('scroll', this.handleScroll.bind(this));
-      this.setAttribute('role', 'listbox');
+      this.setAttribute('role', 'list');
 
       this.touchHandler_ = new cr.ui.TouchHandler(this);
       this.addEventListener(cr.ui.TouchHandler.EventType.TOUCH_START,
@@ -332,6 +346,14 @@ cr.define('cr.ui', function() {
       // Make list focusable
       if (!this.hasAttribute('tabindex'))
         this.tabIndex = 0;
+
+      // Try to get an unique id prefix from the id of this element or the
+      // nearest ancestor with an id.
+      var element = this;
+      while (element && !element.id)
+        element = element.parentElement;
+      if (element && element.id)
+        this.uniqueIdPrefix_ = element.id;
     },
 
     /**
@@ -582,8 +604,11 @@ cr.define('cr.ui', function() {
     handleOnChange_: function(ce) {
       ce.changes.forEach(function(change) {
         var listItem = this.getListItemByIndex(change.index);
-        if (listItem)
-          listItem.selected = change.selected;
+          if (listItem) {
+            listItem.selected = change.selected;
+            if (change.selected)
+              this.setAttribute('aria-activedescendant', listItem.id);

[Ivan Korotkov, 2012/08/03 01:00:23]

Indentation.

[dmazzoni, 2012/08/03 22:59:01]

Done.

+          }
       }, this);
 
       cr.dispatchSimpleEvent(this, 'change');
@@ -816,6 +841,7 @@ cr.define('cr.ui', function() {
     createItem: function(value) {
       var item = new this.itemConstructor_(value);
       item.label = value;
+      item.id = this.uniqueIdPrefix_ + '-' + this.nextUniqueIdSuffix_++;
       if (typeof item.decorate == 'function')
         item.decorate();
       return item;