Improve accessibility of user image selection screen.

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

Index: chrome/browser/resources/shared/js/cr/ui/list_item.js
diff --git a/chrome/browser/resources/shared/js/cr/ui/list_item.js b/chrome/browser/resources/shared/js/cr/ui/list_item.js
index a670a1f27f424f5fffc8623a2abbcedb3c5c5445..5d7d3e321d34926d430e8eb9bb6c18b0b4495aa0 100644
--- a/chrome/browser/resources/shared/js/cr/ui/list_item.js
+++ b/chrome/browser/resources/shared/js/cr/ui/list_item.js
@@ -36,7 +36,7 @@ cr.define('cr.ui', function() {
      * 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');
     },
 
     /**