CCA: Announce seconds when chromevox navigate to toggle timer button

Bug: 1135030
Test: Manually with chromevox.
Change-Id: Id57fa54f5d01dc485a418ee1d209a14af2310698
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2451832
Auto-Submit: Inker Kuo <inker@chromium.org>
Reviewed-by: Shik Chen <shik@chromium.org>
Reviewed-by: Wei Lee <wtlee@chromium.org>
Commit-Queue: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814482}

chromeos/components/camera_app_ui/resources.h

@@ -25,7 +25,8 @@ const struct {
     {"gallery_button", IDS_GALLERY_BUTTON},
     {"error_msg_save_file_failed", IDS_ERROR_MSG_SAVE_FILE_FAILED},
     {"export_button", IDS_EXPORT_BUTTON},
-    {"toggle_timer_button", IDS_TOGGLE_TIMER_BUTTON},
+    {"toggle_timer_3s_button", IDS_TOGGLE_TIMER_3S_BUTTON},
+    {"toggle_timer_10s_button", IDS_TOGGLE_TIMER_10S_BUTTON},
     {"migrate_pictures_msg", IDS_MIGRATE_PICTURES_MSG},
     {"aria_grid_3x3", IDS_ARIA_GRID_3X3},
     {"record_video_start_button", IDS_RECORD_VIDEO_START_BUTTON},

chromeos/components/camera_app_ui/resources/js/util.js

@@ -411,11 +411,13 @@ export function toggleChecked(element, checked) {
  */
 export function bindElementAriaLabelWithState(
     {element, state: s, onLabel, offLabel}) {
-  state.addObserver(s, (value) => {
+  const update = (value) => {
     const label = value ? onLabel : offLabel;
     element.setAttribute('i18n-label', label);
     element.setAttribute('aria-label', browserProxy.getI18nMessage(label));
-  });
+  };
+  update(state.get(s));
+  state.addObserver(s, update);
 }
 
 /**

chromeos/components/camera_app_ui/resources/js/views/camera/options.js

@@ -98,6 +98,13 @@ export class Options {
     this.toggleMic_.addEventListener('click', () => this.updateAudioByMic_());
     this.toggleMirror_.addEventListener('click', () => this.saveMirroring_());
 
+    util.bindElementAriaLabelWithState({
+      element: dom.get('#toggle-timer', Element),
+      state: state.State.TIMER_3SEC,
+      onLabel: 'toggle_timer_3s_button',
+      offLabel: 'toggle_timer_10s_button',
+    });
+
     // Restore saved mirroring states per video device.
     browserProxy.localStorageGet({mirroringToggles: {}})
         .then((values) => this.mirroringToggles_ = values['mirroringToggles']);

chromeos/components/camera_app_ui/resources/strings/camera_strings.grd

@@ -225,8 +225,11 @@
       <message desc="Label for the exporting button." name="IDS_EXPORT_BUTTON">
         Export to disk
       </message>
-      <message desc="Label for the checkbox to toggle the countdown timer." name="IDS_TOGGLE_TIMER_BUTTON">
-        Timer
+      <message desc="Label for the checkbox to toggle the 3 seconds countdown timer." name="IDS_TOGGLE_TIMER_3S_BUTTON">
+        3 seconds timer
+      </message>
+      <message desc="Label for the checkbox to toggle the 10 seconds countdown timer." name="IDS_TOGGLE_TIMER_10S_BUTTON">
+        10 seconds timer
       </message>
       <message desc="Message shown before moving all photos and videos stored in the Camera App to the Downloads folder." name="IDS_MIGRATE_PICTURES_MSG">
         Photos and videos taken with the camera will be moved to the Downloads folder. You can access them in Files.

chromeos/components/camera_app_ui/resources/strings/camera_strings_grd/IDS_TOGGLE_TIMER_10S_BUTTON.png.sha1

+db470ebc393bad8500196cdbb60d8dbd0632040a
\ No newline at end of file

chromeos/components/camera_app_ui/resources/strings/camera_strings_grd/IDS_TOGGLE_TIMER_3S_BUTTON.png.sha1

+8f0182e12a9b90688453555f1310a2c6a2db821c
\ No newline at end of file