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

chrome/browser/resources/options/chromeos/change_picture_options.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() {
 
   var OptionsPage = options.OptionsPage;
   var UserImagesGrid = options.UserImagesGrid;
   var ButtonImages = UserImagesGrid.ButtonImages;
 
@@ skipping 48 matching lines @@
 
       imageGrid.addEventListener('select',
                                  this.handleImageSelected_.bind(this));
       imageGrid.addEventListener('activate',
                                  this.handleImageActivated_.bind(this));
       imageGrid.addEventListener('phototaken',
                                  this.handlePhotoTaken_.bind(this));
       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'),
                         this.handleChooseFile_.bind(this)).type = 'file';
 
       // Profile image data.
       this.profileImage_ = imageGrid.addItem(
           ButtonImages.PROFILE_PICTURE,
           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');
           });
       $('user-image-preview-img').addEventListener(
           'webkitTransitionEnd', function(e) {
             previewElement.classList.remove('animation');
           });
 
       // Old user image data (if present).
@@ skipping 41 matching lines @@
     /**
      * Closes the overlay, returning to the main settings page.
      * @private
      */
     closeOverlay_: function() {
       if (!$('change-picture-page').hidden)
         OptionsPage.closeOverlay();
     },
 
     /**
+     * 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');
     },
 
     /**
      * Handle photo captured event.
      * @param {Event} e Event with 'dataURL' property containing a data URL.
      */
     handlePhotoTaken_: function(e) {
       chrome.send('photoTaken', [e.dataURL]);
     },
 
     /**
+     * Handles "Discard photo" button click.
+     * @private
+     */
+    handleDiscardPhoto_: function() {
+      $('user-image-grid').discardPhoto();
+      chrome.send('discardPhoto');
+    },
+
+    /**
      * Handles "Choose a file" button activation.
      * @private
      */
     handleChooseFile_: function() {
       chrome.send('chooseFile');
       this.closeOverlay_();
     },
 
     /**
      * Handles image selection change.
      * @param {Event} e Selection change Event.
      * @private
      */
     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 &&
           url != ButtonImages.TAKE_PHOTO && url != ButtonImages.CHOOSE_FILE) {
         chrome.send('selectImage', [url, imageGrid.selectionType]);
       }
       // Start/stop camera on (de)selection.
       if (!imageGrid.inProgramSelection &&
           imageGrid.selectionType != e.oldSelectionType) {
         if (imageGrid.selectionType == 'camera') {
@@ skipping 27 matching lines @@
         case ButtonImages.CHOOSE_FILE:
           this.handleChooseFile_();
           break;
         default:
           this.closeOverlay_();
           break;
       }
     },
 
     /**
+     * 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.
      * @private
      */
     setOldImage_: function(imageUrl) {
       var imageGrid = $('user-image-grid');
       if (this.oldImage_) {
         this.oldImage_ = imageGrid.updateItem(this.oldImage_, imageUrl);
       } else {
@@ skipping 38 matching lines @@
     /**
      * Appends default images to the image grid. Should only be called once.
      * @param {Array.<{url: string, author: string, website: string}>}
      *   imagesData An array of default images data, including URL, author and
      *   website.
      * @private
      */
     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 || '';
       }
     },
   };
 
   // Forward public APIs to private implementations.
   [
     'closeOverlay',
     'setCameraPresent',
     'setDefaultImages',
     'setOldImage',
     'setProfileImage',
     'setSelectedImage',
   ].forEach(function(name) {
     ChangePictureOptions[name] = function() {
       var instance = ChangePictureOptions.getInstance();
       return instance[name + '_'].apply(instance, arguments);
     };
   });
 
   // Export
   return {
     ChangePictureOptions: ChangePictureOptions
   };
 
 });