Bug 1068867 - merge pull request #28900 from yzen:bug-1068867 to mozi…

…lla-b2g:master

apps/camera/js/controllers/controls.js

@@ -155,6 +155,8 @@ ControlsController.prototype.onCaptureClick = function() {
 ControlsController.prototype.onRecordingChange = function(recording) {
   this.view.set('recording', recording);
   if (!recording) { this.onRecordingEnd(); }
+  // Update capture button label when recording changes.
+  this.view.setCaptureLabel(recording);
 };
 
 /**

apps/camera/js/views/controls.js

@@ -35,7 +35,8 @@ module.exports = View.extend({
   // {node}: {data-l10n-id} pairs used for localization.
   elsL10n: {
     cancel: 'close-button',
-    thumbnail: 'preview-button'
+    thumbnail: 'preview-button',
+    capture: 'capture-button'
   },
 
   render: function() {
@@ -115,6 +116,11 @@ module.exports = View.extend({
     window.removeEventListener('load', this.setupSwitch);
   },
 
+  setCaptureLabel: function(recording) {
+    this.els.capture.setAttribute('data-l10n-id',
+      recording ? 'stop-capture-button' : 'capture-button');
+  },
+
   onSwitchSnapped: function(edges) {
     var mode = this.switchPositions[edges.x];
     var changed = mode !== this.get('mode');
@@ -169,6 +175,8 @@ module.exports = View.extend({
     var ratio = { left: 0, right: 1 }[this.switchPosition];
     this.updateSwitchPosition();
     this.setSwitchIcon(ratio);
+    // Set appropriate mode switch label for screen reader.
+    this.els.switch.setAttribute('data-l10n-id', mode + '-mode-button');
     debug('mode set pos: %s', this.switchPosition);
   },
 
@@ -261,6 +269,9 @@ module.exports = View.extend({
       // Resetting data-l10n-id will trigger localization for the el.
       this.els[el].setAttribute('data-l10n-id', this.elsL10n[el]);
     }
+    // Switch mode label depends on the mode that is currently set.
+    var mode = this.get('mode') || 'picture';
+    this.els.switch.setAttribute('data-l10n-id', mode + '-mode-button');
   },
 
   template: function() {
@@ -272,18 +283,19 @@ module.exports = View.extend({
         'name="cancel" data-icon="close" role="button" data-l10n-id="close-button"></div>' +
     '</div>' +
     '<div class="controls-middle">' +
-      '<div class="capture-button test-capture rotates js-capture" name="capture">' +
+      '<div class="capture-button test-capture rotates js-capture" name="capture" ' +
+        'data-l10n-id="capture-button" role="button">' +
         '<div class="circle outer-circle"></div>' +
         '<div class="circle inner-circle"></div>' +
         '<div class="center" data-icon="camera"></div>' +
       '</div>' +
     '</div>' +
     '<div class="controls-right">' +
       '<div class="mode-switch test-switch" name="switch">' +
-        '<div class="inner js-switch">' +
-          '<div class="mode-switch_bg-icon rotates" data-icon="camera"></div>' +
-          '<div class="mode-switch_bg-icon rotates" data-icon="video"></div>' +
-          '<div class="mode-switch_handle js-switch-handle">' +
+        '<div class="inner js-switch" role="button">' +
+          '<div class="mode-switch_bg-icon rotates" data-icon="camera" aria-hidden="true"></div>' +
+          '<div class="mode-switch_bg-icon rotates" data-icon="video" aria-hidden="true"></div>' +
+          '<div class="mode-switch_handle js-switch-handle" aria-hidden="true">' +
             '<div class="mode-switch_current-icon camera rotates js-icon-camera" data-icon="camera"></div>' +
             '<div class="mode-switch_current-icon video rotates js-icon-video" data-icon="video"></div>' +
           '</div>' +

apps/camera/locales/camera.en-US.properties

@@ -120,3 +120,11 @@ share-button.ariaLabel = Share
 more-button.ariaLabel = More
 media-frame.ariaLabel = Frame {{current}} of {{total}}
 media-frame.ariaMozHint = Swipe left with 2 fingers to jump to next, or swipe right to jump to previous
+capture-button.ariaLabel = Capture
+stop-capture-button.ariaLabel = Stop capture
+# LOCALIZATION NOTE(picture-mode-button): When button is in picture mode, label
+# indicates that activation will cause video mode to be set.
+picture-mode-button.ariaLabel = Set Video Mode
+# LOCALIZATION NOTE(video-mode-button): When button is in video mode, label
+# indicates that activation will cause picture mode to be set.
+video-mode-button.ariaLabel = Set Photo Mode

apps/camera/test/unit/controllers/controls_test.js

@@ -174,6 +174,15 @@ suite('controllers/controls', function() {
     });
   });
 
+  suite('ControlsController#onRecordingChange', function() {
+    test('When recording view\'s setCaptureLabel should be called', function() {
+      [true, false].forEach(function(recording) {
+        this.controller.onRecordingChange(recording);
+        assert.isTrue(this.view.setCaptureLabel.calledWith(recording));
+      }, this);
+    });
+  });
+
   suite('ControlsController.onViewModeChanged()', function() {
     test('It switches to the next mode setting', function() {
       this.controller.onViewModeChanged();

apps/camera/test/unit/views/controls_test.js

@@ -243,6 +243,8 @@ suite('views/controls', function() {
     view.setMode('video');
     view.appendTo(document.body);
     assert.equal(view.drag.handle.el.style.transform, 'translate(64px, 0px)');
+    assert.equal(view.els.switch.getAttribute('data-l10n-id'),
+      'video-mode-button');
   });
 
   test('ControlsView#localize', function() {
@@ -251,5 +253,16 @@ suite('views/controls', function() {
     for (var el in view.elsL10n) {
       assert.equal(view.els[el].getAttribute('data-l10n-id'), view.elsL10n[el]);
     }
+    assert.equal(view.els.switch.getAttribute('data-l10n-id'),
+      'picture-mode-button');
+  });
+
+  test('ControlsView#setCaptureLabel', function() {
+    var view = new this.ControlsView();
+    [true, false].forEach(function(recording) {
+      view.setCaptureLabel(recording);
+      assert.equal(view.els.capture.getAttribute('data-l10n-id'),
+        recording ? 'stop-capture-button' : 'capture-button');
+    });
   });
 });