Improve accessibility of user image selection screen.

chrome/browser/resources/shared/js/cr/ui/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.
 
 // require: list_selection_model.js
 // require: list_selection_controller.js
 // require: list.js
 
 /**
  * @fileoverview This implements a grid control. Grid contains a bunch of
  * similar elements placed in multiple columns. It's pretty similar to the list,
  * except the multiple columns layout.
  */
 
 cr.define('cr.ui', function() {
   /** @const */ var ListSelectionController = cr.ui.ListSelectionController;
   /** @const */ var List = cr.ui.List;
   /** @const */ var ListItem = cr.ui.ListItem;
 
   /**
    * Creates a new grid item element.
    * @param {*} dataItem The data item.
    * @constructor
    * @extends {cr.ui.ListItem}
    */
   function GridItem(dataItem) {
-    var el = cr.doc.createElement('span');
+    var el = cr.doc.createElement('li');
     el.dataItem = dataItem;
     el.__proto__ = GridItem.prototype;
     return el;
   }
 
   GridItem.prototype = {
     __proto__: ListItem.prototype,
 
     /**
      * Called when an element is decorated as a grid item.
@@ skipping 305 matching lines @@
    */
   function GridSelectionController(selectionModel, grid) {
     this.selectionModel_ = selectionModel;
     this.grid_ = grid;
   }
 
   GridSelectionController.prototype = {
     __proto__: ListSelectionController.prototype,
 
     /**
+     * Check if accessibility is enabled: if ChromeVox is running
+     * (which provides spoken feedback for accessibility), make up/down
+     * behave the same as left/right. That's because the 2-dimensional
+     * structure of the grid isn't exposed, so it makes more sense to a
+     * user who is relying on spoken feedback to flatten it.
+     * @return {boolean} True if accessibility is enabled.
+     */
+    isAccessibilityEnabled: function() {
+      return (window.cvox && cvox.Api &&

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

No need in braces.

+              cvox.Api.isChromeVoxActive && cvox.Api.isChromeVoxActive());

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

No need in parens.

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

Removed parens. Braces are still needed, or am I misunderstanding?

[Ivan Korotkov, 2012/08/03 23:19:37]

Uh, right, that was a stray comment.

+    },
+
+    /**
      * Returns the index below (y axis) the given element.
      * @param {number} index The index to get the index below.
      * @return {number} The index below or -1 if not found.
      * @override
      */
     getIndexBelow: function(index) {
+      if (this.isAccessibilityEnabled())
+        return this.getIndexAfter(index);
       var last = this.getLastIndex();
-      if (index == last) {
+      if (index == last)
         return -1;
-      }
       index += this.grid_.columns;
       return Math.min(index, last);
     },
 
     /**
      * Returns the index above (y axis) the given element.
      * @param {number} index The index to get the index above.
      * @return {number} The index below or -1 if not found.
      * @override
      */
     getIndexAbove: function(index) {
-      if (index == 0) {
+      if (this.isAccessibilityEnabled())
+        return this.getIndexBefore(index);
+      if (index == 0)
         return -1;
-      }
       index -= this.grid_.columns;
       return Math.max(index, 0);
     },
 
     /**
      * Returns the index before (x axis) the given element.
      * @param {number} index The index to get the index before.
      * @return {number} The index before or -1 if not found.
      * @override
      */
@@ skipping 14 matching lines @@
       return index + 1;
     }
   };
 
   return {
     Grid: Grid,
     GridItem: GridItem,
     GridSelectionController: GridSelectionController
   };
 });