Improve accessibility of user image selection screen.

chrome/browser/resources/chromeos/user_images_grid.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('options', function() {
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
   /** @const */ var Grid = cr.ui.Grid;
   /** @const */ var GridItem = cr.ui.GridItem;
   /** @const */ var GridSelectionController = cr.ui.GridSelectionController;
   /** @const */ var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel;
@@ skipping 48 matching lines @@
 
   UserImagesGridItem.prototype = {
     __proto__: GridItem.prototype,
 
     /** @inheritDoc */
     decorate: function() {
       GridItem.prototype.decorate.call(this);
       var imageEl = cr.doc.createElement('img');
       imageEl.src = this.dataItem.url;
       imageEl.title = this.dataItem.title || '';
-      var label = imageEl.src.replace(/(.*\/|\.png)/g, '');
-      imageEl.setAttribute('aria-label', label.replace(/_/g, ' '));
       if (typeof this.dataItem.clickHandler == 'function')
         imageEl.addEventListener('mousedown', this.dataItem.clickHandler);
       // Remove any garbage added by GridItem and ListItem decorators.
       this.textContent = '';
       this.appendChild(imageEl);
       if (typeof this.dataItem.decorateFn == 'function')
         this.dataItem.decorateFn(this);
+      this.setAttribute('role', 'option');
     }
   };
 
   /**
    * Creates a selection controller that wraps selection on grid ends
    * and translates Enter presses into 'activate' events.
    * @param {cr.ui.ListSelectionModel} selectionModel The selection model to
    *     interact with.
    * @param {cr.ui.Grid} grid The grid to interact with.
    * @constructor
@@ skipping 47 matching lines @@
 
     /** @inheritDoc */
     decorate: function() {
       Grid.prototype.decorate.call(this);
       this.dataModel = new ArrayDataModel([]);
       this.itemConstructor = UserImagesGridItem;
       this.selectionModel = new ListSingleSelectionModel();
       this.inProgramSelection_ = false;
       this.addEventListener('dblclick', this.handleDblClick_.bind(this));
       this.addEventListener('change', this.handleChange_.bind(this));
+      this.setAttribute('role', 'listbox');
     },
 
     /**
      * Handles double click on the image grid.
      * @param {Event} e Double click Event.
      * @private
      */
     handleDblClick_: function(e) {
       // If a child element is double-clicked and not the grid itself, handle
       // this as 'Enter' keypress.
@@ skipping 496 matching lines @@
   UserImagesGrid.ButtonImages = {
     TAKE_PHOTO: 'chrome://theme/IDR_BUTTON_USER_IMAGE_TAKE_PHOTO',
     CHOOSE_FILE: 'chrome://theme/IDR_BUTTON_USER_IMAGE_CHOOSE_FILE',
     PROFILE_PICTURE: 'chrome://theme/IDR_PROFILE_PICTURE_LOADING'
   };
 
   return {
     UserImagesGrid: UserImagesGrid
   };
 });