[Office a11y] Add play/pause button for animation

A new play/pause button is added to the lottie animation, the
button will be displayed when the lottie animation is hovered or
the button itself is being focused via keyboard.

Demo: http://go/scrcast/NTc0MDUyMzgzMTY4OTIxNnw5OTBmMDkwYy03OQ

Bug: b:286940750
Change-Id: I591adcac88df6ba5b355d33c97a9a7379cd4d412
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4622862
Commit-Queue: Wenbo Jie <wenbojie@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1159454}

chrome/browser/resources/chromeos/cloud_upload/BUILD.gn

@@ -19,6 +19,8 @@ build_webui("build") {
     "icons/error.svg",
     "icons/list_check.svg",
     "icons/office.svg",
+    "icons/pause.svg",
+    "icons/play.svg",
     "icons/sheets.svg",
     "icons/slides.svg",
     "images/connect_one_drive_app_icon.svg",

chrome/browser/resources/chromeos/cloud_upload/move_confirmation_page.html

@@ -61,7 +61,9 @@
   }
 
   cr-lottie {
-    height: 236px;
+    height: 100%;
+    position: absolute;
+    width: 100%;
   }
 
   :host-context([theme='legacy']) cr-button {
@@ -120,11 +122,65 @@
     outline: 2px solid var(--cros-sys-focus_ring);
     outline-offset: 2px;
   }
+
+  .animation-wrapper {
+    height: 236px;
+    position: relative;
+    width: 512px;
+  }
+
+  #playPauseIcon {
+    /* No dynamic color required here. */
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 24px;
+    bottom: 0;
+    height: 48px;
+    left: 0;
+    margin: auto;
+    min-width: 48px;;
+    opacity: 0; /* We use opacity to hide/show the element so it stays in
+                    the tab index */
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 48px;
+  }
+
+  #playPauseIcon:hover::part(hoverBackground) {
+    background-color: var(--cros-sys-hover_on_subtle);
+    display: block;
+  }
+
+  .animation-wrapper:hover #playPauseIcon, #playPauseIcon:focus {
+    opacity: 1;
+  }
+
+  #playPauseIcon > .icon {
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    /* No dynamic color required here. */
+    background-color: white;
+    height: 48px;
+    width: 48px;
+  }
+
+  #playPauseIcon.play > .icon {
+    -webkit-mask-image: url(icons/play.svg);
+  }
+
+  #playPauseIcon.pause > .icon {
+    -webkit-mask-image: url(icons/pause.svg);
+  }
 </style>
 
 <!-- TODO(b/258071752): Use localized strings -->
-<cr-lottie id="animation" aria-hidden="true" autoplay>
-</cr-lottie>
+<div class="animation-wrapper">
+  <cr-lottie id="animation" aria-hidden="true" autoplay></cr-lottie>
+  <cr-button id="playPauseIcon" class="pause" aria-label="$i18n{animationPlayText}">
+    <div class="icon"></div>
+  </cr-button>
+</div>
 <div id="dialog" role="dialog" autofocus tabindex="-1" aria-labelledby="title">
   <div class="body-wrapper">
     <div id="title"></div>

chrome/browser/resources/chromeos/cloud_upload/move_confirmation_page.ts

@@ -6,7 +6,9 @@ import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.js';
 import 'chrome://resources/cr_elements/cr_lottie/cr_lottie.js';
 
+import {loadTimeData} from 'chrome://resources/ash/common/load_time_data.m.js';
 import type {CrCheckboxElement} from 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.js';
+import type {CrLottieElement} from 'chrome://resources/cr_elements/cr_lottie/cr_lottie.js';
 import {MetricsRecordedSetupPage, OperationType, UserAction} from './cloud_upload.mojom-webui.js';
 import {CloudUploadBrowserProxy} from './cloud_upload_browser_proxy.js';
 import {getTemplate} from './move_confirmation_page.html.js';
@@ -25,6 +27,7 @@ export class MoveConfirmationPageElement extends HTMLElement {
   private proxy: CloudUploadBrowserProxy =
       CloudUploadBrowserProxy.getInstance();
   private cloudProvider: CloudProvider|undefined;
+  private playPauseButton: HTMLElement|undefined;
 
   constructor() {
     super();
@@ -34,9 +37,12 @@ export class MoveConfirmationPageElement extends HTMLElement {
     shadowRoot.innerHTML = getTemplate();
     const actionButton = this.$('.action-button')!;
     const cancelButton = this.$('.cancel-button')!;
+    this.playPauseButton = this.$('#playPauseIcon')!;
 
     actionButton.addEventListener('click', () => this.onActionButtonClick());
     cancelButton.addEventListener('click', () => this.onCancelButtonClick());
+    this.playPauseButton.addEventListener(
+        'click', () => this.onPlayPauseButtonClick());
   }
 
   $<T extends HTMLElement>(query: string): T {
@@ -158,6 +164,24 @@ export class MoveConfirmationPageElement extends HTMLElement {
     }
     this.proxy.handler.respondWithUserActionAndClose(UserAction.kCancel);
   }
+
+  private onPlayPauseButtonClick(): void {
+    const animation = this.$<CrLottieElement>('#animation')!;
+    const shouldPlay = this.playPauseButton!.className === 'play';
+    if (shouldPlay) {
+      animation.setPlay(true);
+      // Update button to Pause.
+      this.playPauseButton!.className = 'pause';
+      this.playPauseButton!.ariaLabel =
+          loadTimeData.getString('animationPauseText');
+    } else {
+      animation.setPlay(false);
+      // Update button to Play.
+      this.playPauseButton!.className = 'play';
+      this.playPauseButton!.ariaLabel =
+          loadTimeData.getString('animationPlayText');
+    }
+  }
 }
 
 declare global {

chrome/browser/ui/webui/ash/cloud_upload/cloud_upload_ui.cc

@@ -40,7 +40,9 @@ CloudUploadUI::CloudUploadUI(content::WebUI* web_ui)
       {"cantConnectOneDrive", IDS_CANT_CONNECT_ONEDRIVE},
       {"connectOneDrive", IDS_CONNECT_ONEDRIVE},
       {"oneDriveConnectedTitle", IDS_ONEDRIVE_CONNECTED_TITLE},
-      {"oneDriveConnectedBodyText", IDS_ONEDRIVE_CONNECTED_BODY_TEXT}};
+      {"oneDriveConnectedBodyText", IDS_ONEDRIVE_CONNECTED_BODY_TEXT},
+      {"animationPlayText", IDS_OOBE_PLAY_ANIMATION_MESSAGE},
+      {"animationPauseText", IDS_OOBE_PAUSE_ANIMATION_MESSAGE}};
   source->AddLocalizedStrings(kStrings);
   source->AddBoolean("isJellyEnabled", chromeos::features::IsJellyEnabled());
   webui::SetupWebUIDataSource(