Improve accessibility of user image selection screen.

chrome/browser/resources/chromeos/login/oobe.css

Index: chrome/browser/resources/chromeos/login/oobe.css
diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css
index d011275ff3751798930652799a550d84645204b8..e63a2b1d38285df56b756ef31ae735dfa7eed8dd 100644
--- a/chrome/browser/resources/chromeos/login/oobe.css
+++ b/chrome/browser/resources/chromeos/login/oobe.css
@@ -479,7 +479,7 @@ html[oobe=old] #user-image {
   width: 50px;
 }
 
-#user-image-grid [role=listitem] {
+#user-image-grid li {

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

I'm worried about future changes and nested stuff. What about '#user-image-grid
> [role=option]'?

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

The purpose of "role" is for accessibility. Tying the CSS to the accessible role
makes it difficult to fix accessibility problems.

In particular, it turns out that role=listbox/role=option is good for simple
lists/grids, but role=list/role=listitem is better for lists of items that
contain form controls (like the file manager or search engine editor) - but they
all inherit from the same cr.ui.List/cr.ui.Grid.

So, changed to #user-image-grid > li as discussed.

   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   display: inline-block;