Focus action button instead of triggering in profile picture chooser.

This improves accessibility behavior by focusing the button that will
perform the action when the selected item is pressed. Before, this
would have deleted a user photo or taken a photo. The new behavior
moves focus to a button that is properly labeled.

Bug: 765104,767820
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I8b813a9d53c0e5b47579274253c173fc4294404f
Reviewed-on: https://chromium-review.googlesource.com/764594
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#516391}

chrome/browser/resources/chromeos/login/oobe_change_picture.js

@@ -86,6 +86,7 @@ Polymer({
   listeners: {
     'discard-image': 'onDiscardImage_',
     'image-activate': 'onImageActivate_',
+    'focus-action': 'onFocusAction_',
     'photo-taken': 'onPhotoTaken_',
     'switch-mode': 'onSwitchMode_',
   },
@@ -189,6 +190,11 @@ Polymer({
     this.selectImage_(event.detail);
   },
 
+  /** Focus the action button in the picture pane. */
+  onFocusAction_: function() {
+    /** CrPicturePaneElement */ (this.$.picturePane).focusActionButton();
+  },
+
   /**
    * @param {!{detail: !{photoDataUrl: string}}} event
    * @private

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

@@ -67,6 +67,7 @@ Polymer({
   listeners: {
     'discard-image': 'onDiscardImage_',
     'image-activate': 'onImageActivate_',
+    'focus-action': 'onFocusAction_',
     'photo-taken': 'onPhotoTaken_',
     'switch-mode': 'onSwitchMode_',
   },
@@ -202,6 +203,11 @@ Polymer({
     this.selectImage_(event.detail);
   },
 
+  /** Focus the action button in the picture pane. */
+  onFocusAction_: function() {
+    /** CrPicturePaneElement */ (this.$.picturePane).focusActionButton();
+  },
+
   /**
    * @param {!{detail: !{photoDataUrl: string}}} event
    * @private

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.js

@@ -84,6 +84,12 @@ Polymer({
     this.stopCamera();
   },
 
+  /** Only focuses the button if it's not disabled. */
+  focusTakePhotoButton: function() {
+    if (this.cameraOnline_)
+      this.$.takePhoto.focus();
+  },
+
   /**
    * Performs photo capture from the live camera stream. A 'photo-taken' event
    * will be fired as soon as captured photo is available, with the

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.js

@@ -230,10 +230,15 @@ Polymer({
     this.cameraSelected_ =
         selected.dataset.type == CrPicture.SelectionTypes.CAMERA;
     this.selectedItem = selected;
-    if (activate && selected.dataset.type == CrPicture.SelectionTypes.OLD)
-      this.fire('discard-image');
-    else if (activate || selected.dataset.type != CrPicture.SelectionTypes.FILE)
+
+    if (selected.dataset.type == CrPicture.SelectionTypes.OLD ||
+        selected.dataset.type == CrPicture.SelectionTypes.CAMERA) {
+      if (activate)
+        this.fire('focus-action', selected);
+    } else if (
+        activate || selected.dataset.type != CrPicture.SelectionTypes.FILE) {
       this.fire('image-activate', selected);
+    }
   },
 
   /**
@@ -242,8 +247,9 @@ Polymer({
    */
   onIronActivate_: function(event) {
     var type = event.detail.item.dataset.type;
-    // When clicking on the 'old' (current) image, do not activate (discard) it.
-    var activate = type != CrPicture.SelectionTypes.OLD;
+    // Don't change focus when activating the camera or current image via mouse.
+    var activate = type != CrPicture.SelectionTypes.OLD &&
+        type != CrPicture.SelectionTypes.CAMERA;
     this.selectImage_(event.detail.item, activate);
   },
 

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.js

@@ -66,11 +66,19 @@ Polymer({
       camera.takePhoto();
   },
 
+  /** Tells the pane to focus the main action button. */
+  focusActionButton: function() {
+    if (this.showDiscard_())
+      this.$.discardImage.focus();
+    else if (this.cameraActive_)
+      this.$$('#camera').focusTakePhotoButton();
+  },
+
   /**
    * @return {boolean}
    * @private
    */
-  getCameraActive_() {
+  getCameraActive_: function() {
     return this.cameraPresent &&
         this.imageType == CrPicture.SelectionTypes.CAMERA;
   },