Spoken feedback sounds for user photo capture/discard at image picker added.

chrome/browser/resources/options/chromeos/change_picture_options.js

Index: chrome/browser/resources/options/chromeos/change_picture_options.js
diff --git a/chrome/browser/resources/options/chromeos/change_picture_options.js b/chrome/browser/resources/options/chromeos/change_picture_options.js
index 51ed5364e2607d1e0c499e76a228193af8c30744..60930ecd6647353b41e51d3a5a7643333c439cf3 100644
--- a/chrome/browser/resources/options/chromeos/change_picture_options.js
+++ b/chrome/browser/resources/options/chromeos/change_picture_options.js
@@ -66,9 +66,6 @@ cr.define('options', function() {
       imageGrid.addEventListener('photoupdated',
                                  this.handlePhotoTaken_.bind(this));
 
-      // Set the title for "Take Photo" button.
-      imageGrid.cameraTitle = loadTimeData.getString('takePhoto');
-
       // Add the "Choose file" button.
       imageGrid.addItem(ButtonImages.CHOOSE_FILE,
                         loadTimeData.getString('chooseFile'),
@@ -80,17 +77,19 @@ cr.define('options', function() {
           loadTimeData.getString('profilePhotoLoading'));
       this.profileImage_.type = 'profile';
 
+      // Set the title for camera item in the grid.
+      imageGrid.setCameraTitles(
+          loadTimeData.getString('takePhoto'),
+          loadTimeData.getString('photoFromCamera'));
+
       $('take-photo').addEventListener(
           'click', this.handleTakePhoto_.bind(this));
       $('discard-photo').addEventListener(
-          'click', imageGrid.discardPhoto.bind(imageGrid));
+          'click', this.handleDiscardPhoto_.bind(this));
 
       // Toggle 'animation' class for the duration of WebKit transition.
       $('flip-photo').addEventListener(
-          'click', function(e) {
-            previewElement.classList.add('animation');
-            imageGrid.flipPhoto = !imageGrid.flipPhoto;
-          });
+          'click', this.handleFlipPhoto_.bind(this));
       $('user-image-stream-crop').addEventListener(
           'webkitTransitionEnd', function(e) {
             previewElement.classList.remove('animation');
@@ -152,11 +151,25 @@ cr.define('options', function() {
     },
 
     /**
+     * Handle camera-photo flip.
+     */
+    handleFlipPhoto_: function() {
+      var imageGrid = $('user-image-grid');
+      imageGrid.previewElement.classList.add('animation');
+      imageGrid.flipPhoto = !imageGrid.flipPhoto;
+      var flipMessageId = imageGrid.flipPhoto ?
+         'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText';
+      this.announceAccessibleMessage_(
+          loadTimeData.getString(flipMessageId));
+    },
+
+    /**
      * Handles "Take photo" button click.
      * @private
      */
     handleTakePhoto_: function() {
       $('user-image-grid').takePhoto();
+      chrome.send('takePhoto');
     },
 
     /**
@@ -168,6 +181,15 @@ cr.define('options', function() {
     },
 
     /**
+     * Handles "Discard photo" button click.
+     * @private
+     */
+    handleDiscardPhoto_: function() {
+      $('user-image-grid').discardPhoto();
+      chrome.send('discardPhoto');
+    },
+
+    /**
      * Handles "Choose a file" button activation.
      * @private
      */
@@ -184,6 +206,10 @@ cr.define('options', function() {
     handleImageSelected_: function(e) {
       var imageGrid = $('user-image-grid');
       var url = imageGrid.selectedItemUrl;
+
+      // Flip button available only for camera picture.
+      imageGrid.flipPhotoElement.tabIndex =
+          imageGrid.selectionType == 'camera' ? 1 : -1;
       // Ignore selection change caused by program itself and selection of one
       // of the action buttons.
       if (!imageGrid.inProgramSelection &&
@@ -231,6 +257,24 @@ cr.define('options', function() {
     },
 
     /**
+     * Add an accessible message to the page that will be announced to
+     * users who have spoken feedback on, but will be invisible to all
+     * other users. It's removed right away so it doesn't clutter the DOM.
+     */
+    announceAccessibleMessage_: function(msg) {
+      var element = document.createElement('div');
+      element.setAttribute('aria-live', 'polite');
+      element.style.position = 'relative';
+      element.style.left = '-9999px';
+      element.style.height = '0px';
+      element.innerText = msg;
+      document.body.appendChild(element);
+      window.setTimeout(function() {
+        document.body.removeChild(element);
+      }, 0);
+    },
+
+    /**
      * Adds or updates old user image taken from file/camera (neither a profile
      * image nor a default one).
      * @param {string} imageUrl Old user image, as data or internal URL.
@@ -289,7 +333,7 @@ cr.define('options', function() {
     setDefaultImages_: function(imagesData) {
       var imageGrid = $('user-image-grid');
       for (var i = 0, data; data = imagesData[i]; i++) {
-        var item = imageGrid.addItem(data.url);
+        var item = imageGrid.addItem(data.url, data.title);
         item.type = 'default';
         item.author = data.author || '';
         item.website = data.website || '';