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 8fcbd73b8aee92fb2232479e492b14eb515370cc..3e693a328628513a91e76aed1da77e2579c344b0 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 an 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,
+
+    /**
      * Function used to create grid items.
      * @type {function(): !ListItem}
      */
@@ -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;
     },
 
     /**
@@ -573,8 +595,11 @@ cr.define('cr.ui', function() {
     handleOnChange_: function(ce) {
       ce.changes.forEach(function(change) {
         var listItem = this.getListItemByIndex(change.index);
-        if (listItem)
+        if (listItem) {
           listItem.selected = change.selected;
+          if (change.selected)
+            this.setAttribute('aria-activedescendant', listItem.id);
+        }
       }, this);
 
       cr.dispatchSimpleEvent(this, 'change');
@@ -807,6 +832,9 @@ cr.define('cr.ui', function() {
     createItem: function(value) {
       var item = new this.itemConstructor_(value);
       item.label = value;
+      item.id = this.uniqueIdPrefix_ + '-' + this.nextUniqueIdSuffix_;

[Ivan Korotkov, 2012/05/04 17:02:27]

Please make assigning unique IDs to each element optional, so that this doesn't
affect other lists.

[dmazzoni, 2012/05/04 17:48:00]

I don't want to make it optional, then we'll have to explicitly enable it to
make any other list accessible. This change should improve accessibility for
other lists.

The unique id prefix is derived from the id of the nearest ancestor, so it's
extremely unlikely two lists will end up with the same id. If they did, it's
unlikely it'd break anything other than accessibility.

The only other option I see is to make nextUniqueIdSuffix a class variable (i.e.
a global) so that ids are never shared between list items.

[Ivan Korotkov, 2012/05/04 22:03:33]

Ok, I guess these IDs won't hurt.

+      this.nextUniqueIdSuffix_++;
+
       if (typeof item.decorate == 'function')
         item.decorate();
       return item;