Settings People Revamp: Change Picture: Add accessibility-key usage.

chrome/browser/resources/settings/people_page/change_picture.js

 // Copyright 2015 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('settings_test', function() {
   var changePictureOptions = settings_test.changePictureOptions || {
     /**
      * True if property changes should fire events for testing purposes.
      * @type {boolean}
      */
@@ skipping 201 matching lines @@
         break;
       case 'default':
         settings.ChangePicturePrivateApi.selectDefaultImage(image.src);
         break;
       default:
         assertNotReached('Selected unknown image type');
     }
   },
 
   /**
+   * Handler for when accessibility-specific keys are pressed.
+   * @param {!{detail: !{key: string}}} e
+   */
+  onKeysPress_: function(e) {
+    if (!this.selectedItem_)
+      return;
+
+    // In the old Options user images grid, the 'up' and 'down' keys had
+    // different behavior depending on whether ChromeVox was on or off.
+    // If ChromeVox was on, 'up' or 'down' would select the next or previous
+    // image on the left or right. If ChromeVox was off, it would select the
+    // image spatially above or below using calculated columns.
+    //
+    // The code below implements the simple behavior of selecting the image
+    // to the left or right (as if ChromeVox was always on).
+    //
+    // TODO(tommycli): Investigate if it's necessary to calculate columns
+    // and select the image on the top or bottom for non-ChromeVox users.
+    var /** IronSelectorElement */ selector = this.$.selector;
+    switch (e.detail.key) {
+      case 'up':
+      case 'left':
+        // This loop always terminates because the file and profile icons are
+        // never hidden.
+        do {
+          selector.selectPrevious();
+        } while (this.selectedItem_.hidden);
+
+        this.lastSelectedImageType_ = this.selectedItem_.dataset.type;
+        break;
+
+      case 'down':
+      case 'right':
+        // This loop always terminates because the file and profile icons are
+        // never hidden.
+        do {
+          selector.selectNext();
+        } while (this.selectedItem_.hidden);
+
+        this.lastSelectedImageType_ = this.selectedItem_.dataset.type;
+        break;
+
+      case 'enter':
+      case 'space':
+        if (this.selectedItem_.dataset.type == 'camera') {
+          var /** SettingsCameraElement */ camera = this.$.camera;
+          camera.takePhoto();
+        } else if (this.selectedItem_.dataset.type == 'file') {
+          settings.ChangePicturePrivateApi.chooseFile();
+        } else if (this.selectedItem_.dataset.type == 'old') {
+          this.onTapDiscardOldImage_();
+        }
+        break;
+    }

[Dan Beam, 2016/03/01 22:58:24]

we should probably test this as well, btw

[tommycli, 2016/03/01 23:10:37]

I'm down with that. I'll add that in a follow up CL.

+  },
+
+  /**
    * Handler for when the an image is activated.
    * @param {!Event} event
    * @private
    */
   onImageActivate_: function(event) {
     var image = event.detail.item;
     this.lastSelectedImageType_ = image.dataset.type;
     this.selectImage_(image);
   },
 
@@ skipping 39 matching lines @@
    * @private
    */
   isOldImageHidden_: function(oldImageUrl) { return oldImageUrl.length == 0; },
 
   /**
    * @param {settings.ChangePictureImageElement} selectedItem
    * @return {boolean} True if the preview image should be hidden.
    * @private
    */
   isPreviewImageHidden_: function(selectedItem) {
-    if (selectedItem == undefined)
+    if (!selectedItem)
       return true;
 
     var type = selectedItem.dataset.type;
     return type != 'default' && type != 'profile' && type != 'old';
   },
 
   /**
    * @param {settings.ChangePictureImageElement} selectedItem
    * @return {boolean} True if the camera is selected in the image grid.
    * @private
    */
   isCameraActive_: function(cameraPresent, selectedItem) {
-    return cameraPresent &&
-           selectedItem != undefined &&
-           selectedItem.dataset.type == 'camera';
+    return cameraPresent && selectedItem &&
+        selectedItem.dataset.type == 'camera';
   },
 
   /**
    * @param {settings.ChangePictureImageElement} selectedItem
    * @return {boolean} True if the discard controls should be hidden.
    * @private
    */
   isDiscardHidden_: function(selectedItem) {
-    return selectedItem == undefined || selectedItem.dataset.type != 'old';
+    return !selectedItem || selectedItem.dataset.type != 'old';
   },
 
   /**
    * @param {settings.ChangePictureImageElement} selectedItem
    * @return {boolean} True if the author credit text is shown.
    * @private
    */
   isAuthorCreditShown_: function(selectedItem) {
     return selectedItem && selectedItem.dataset.type == 'default';
   },
@@ skipping 21 matching lines @@
    * @private
    */
   getAuthorWebsite_: function(selectedItem, defaultImages) {
     if (!this.isAuthorCreditShown_(selectedItem))
       return '';
 
     assert(selectedItem.dataset.defaultImageIndex < defaultImages.length);
     return defaultImages[selectedItem.dataset.defaultImageIndex].website;
   },
 });