Update messages and element-name.
1. Update checkbox messages to improve accessibility.
2. Use 'toggle' only on checkbox to avoid confusion.
BUG=chromium:878257
TEST=Tested by showing tooltips and using ChromeVox on buttons.
Change-Id: I69bdb3e5d894966c06c8807e537c3b502a331be6
Reviewed-on: https://chromium-review.googlesource.com/c/1275927
Reviewed-by: Sheng-hao Tsao <shenghao@google.com>
Tested-by: yuli <yuli@chromium.org>
diff --git a/Makefile b/Makefile
index 0585f63..efb4db8 100644
--- a/Makefile
+++ b/Makefile
@@ -73,11 +73,11 @@
src/images/camera_button_mic_on.svg \
src/images/camera_button_mirror_off.svg \
src/images/camera_button_mirror_on.svg \
+ src/images/camera_button_switch_device.svg \
src/images/camera_button_switch_photo.svg \
src/images/camera_button_switch_video.svg \
src/images/camera_button_timer_off.svg \
src/images/camera_button_timer_on.svg \
- src/images/camera_button_toggle_device.svg \
src/images/camera_focus_aim.svg \
src/images/camera_mode_photo.svg \
src/images/camera_mode_recording.svg \
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index ae6c331..6dad0a3 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -89,13 +89,9 @@
"message": "Stop recording",
"description": "Label for the shutter button to stop recording."
},
- "toggleTimerButton": {
- "message": "Toggle timer",
- "description": "Label for the button to toggle the countdown timer."
- },
- "toggleCameraButton": {
- "message": "Toggle camera",
- "description": "Label for the button to switch between multiple cameras. Eg. switching from front facing to back facing, or a camera connected via USB. The button is shown only when more than one camera is connected."
+ "switchCameraButton": {
+ "message": "Switch to next camera",
+ "description": "Label for the button to switch to next connected camera. Eg. switching from front facing to back facing, or a camera connected via USB. The button is shown only when more than one camera is connected."
},
"switchRecordVideoButton": {
"message": "Switch to record video",
@@ -105,17 +101,21 @@
"message": "Switch to take photo",
"description": "Label for the button to switch to take photo mode."
},
+ "toggleTimerButton": {
+ "message": "Timer",
+ "description": "Label for the checkbox to toggle the countdown timer."
+ },
"toggleMirrorButton": {
- "message": "Toggle mirroring",
- "description": "Label for the button to toggle the preview mirroring."
+ "message": "Mirroring",
+ "description": "Label for the checkbox to toggle the preview mirroring."
},
"toggleGridButton": {
- "message": "Toggle grid",
- "description": "Label for the button to toggle the grid shown on preview."
+ "message": "Grid",
+ "description": "Label for the checkbox to toggle the grid shown on preview."
},
"toggleMicButton": {
- "message": "Toggle microphone",
- "description": "Label for the button to toggle the microphone for recording video."
+ "message": "Microphone",
+ "description": "Label for the checkbox to toggle the microphone for recording video."
},
"dialogOKButton": {
"message": "OK",
diff --git a/src/css/main.css b/src/css/main.css
index b379d45..7a54fc7 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -370,17 +370,17 @@
visibility: visible;
}
-#toggle-device {
- background-image: url(../images/camera_button_toggle_device.svg);
+#switch-device {
+ background-image: url(../images/camera_button_switch_device.svg);
width: 48px;
height: 48px;
}
-#toggle-device.animate {
- animation: toggle-device-rotate 350ms ease-out;
+#switch-device.animate {
+ animation: switch-device-rotate 350ms ease-out;
}
-@keyframes toggle-device-rotate {
+@keyframes switch-device-rotate {
0% {
transform: rotate(0deg);
}
diff --git a/src/images/camera_button_toggle_device.svg b/src/images/camera_button_switch_device.svg
similarity index 100%
rename from src/images/camera_button_toggle_device.svg
rename to src/images/camera_button_switch_device.svg
diff --git a/src/js/views/camera/options.js b/src/js/views/camera/options.js
index f3dcfc0..19b4ee6 100644
--- a/src/js/views/camera/options.js
+++ b/src/js/views/camera/options.js
@@ -67,7 +67,7 @@
* @type {HTMLButtonElement}
* @private
*/
- this.toggleDevice_ = document.querySelector('#toggle-device');
+ this.switchDevice_ = document.querySelector('#switch-device');
/**
* @type {HTMLButtonElement}
@@ -140,8 +140,8 @@
'click', this.onSwitchRecordVideoClicked_.bind(this));
this.switchTakePhoto_.addEventListener(
'click', this.onSwitchTakePhotoClicked_.bind(this));
- this.toggleDevice_.addEventListener(
- 'click', this.onToggleDeviceClicked_.bind(this));
+ this.switchDevice_.addEventListener(
+ 'click', this.onSwitchDeviceClicked_.bind(this));
this.toggleMirror_.addEventListener(
'click', this.onToggleMirrorClicked_.bind(this));
this.toggleGrid_.addEventListener(
@@ -225,7 +225,7 @@
this.toggleMic_.disabled = disabled;
disabled = disabled || taking;
- this.toggleDevice_.disabled = disabled;
+ this.switchDevice_.disabled = disabled;
this.switchRecordVideo_.disabled = disabled;
this.switchTakePhoto_.disabled = disabled;
};
@@ -264,13 +264,13 @@
};
/**
- * Handles clicking on the toggle camera device switch.
+ * Handles clicking on the camera device switch.
* @param {Event} event Click event.
* @private
*/
-camera.views.camera.Options.prototype.onToggleDeviceClicked_ = function(event) {
+camera.views.camera.Options.prototype.onSwitchDeviceClicked_ = function(event) {
this.videoDeviceIds_.then(deviceIds => {
- camera.util.animateOnce(this.toggleDevice_);
+ camera.util.animateOnce(this.switchDevice_);
var index = deviceIds.indexOf(this.videoDeviceId_);
if (index == -1) {
index = 0;
@@ -497,10 +497,10 @@
// Update UI options.
this.videoDeviceIds_.then(deviceIds => {
- this.toggleDevice_.hidden = deviceIds.length < 2;
+ this.switchDevice_.hidden = deviceIds.length < 2;
}).catch(error => {
console.error(error);
- this.toggleDevice_.hidden = true;
+ this.switchDevice_.hidden = true;
}).finally(() => {
this.refreshingVideoDeviceIds_ = false;
});
diff --git a/src/views/main.html b/src/views/main.html
index 9f65de7..641614d 100644
--- a/src/views/main.html
+++ b/src/views/main.html
@@ -53,8 +53,8 @@
i18n-label="switchRecordVideoButton"></button>
</div>
<div class="bottom-stripe left-stripe buttons circle">
- <button id="toggle-device" disabled tabindex="0"
- i18n-label="toggleCameraButton" hidden></button>
+ <button id="switch-device" disabled tabindex="0"
+ i18n-label="switchCameraButton" hidden></button>
</div>
<div class="bottom-stripe right-stripe buttons circle">
<button id="gallery-enter" disabled tabindex="0"
