Improve accessibility of user image selection screen.

chrome/browser/resources/shared/js/cr/ui/list_item.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() {
 
   /**
    * Creates a new list item element.
    * @param {string} opt_label The text label for the item.
    * @constructor
@@ skipping 18 matching lines @@
     /**
      * This item's index in the containing list.
      * @type {number}
      */
     listIndex_: -1,
 
     /**
      * Called when an element is decorated as a list item.
      */
     decorate: function() {
-      this.setAttribute('role', 'listitem');

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

This can break multiple styles on different pages. Please change
UserImagesGridItem.decorate instead.
Also, you'll have to update chromeos/login/oobe.css and
options2/chromeos/image_picker.css because they rely on [role=listitem]

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

Good catch.

Actually I do want to fix this because 'option' is always correct, 'listitem'
was wrong. 'listitem' is the accessible equivalent of a <li> element, 'option'
is the equivalent of an option in a list box, which is what this is.
Done.

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

Ok then. I hope you've caught all the listitem CSS references :)

+      this.setAttribute('role', 'option');
     },
 
     /**
      * Called when the selection state of this element changes.
      */
     selectionChanged: function() {
     },
   };
 
   /**
@@ skipping 16 matching lines @@
   /**
    * This item's index in the containing list.
    * @type {number}
    */
   cr.defineProperty(ListItem, 'listIndex');
 
   return {
     ListItem: ListItem
   };
 });