Fix: Fix ARIA label on replay button (shaka-project#3513)

Close: shaka-project#3512
cristian-atehortua · Jul 8, 2021 · 2dedd9f · 2dedd9f
1 parent bfece76
commit 2dedd9f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git a/ui/big_play_button.js b/ui/big_play_button.js
@@ -7,6 +7,7 @@
 
 goog.provide('shaka.ui.BigPlayButton');
 
+goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.PlayButton');
 goog.requireType('shaka.ui.Controls');
 
@@ -40,4 +41,13 @@ shaka.ui.BigPlayButton = class extends shaka.ui.PlayButton {
       this.button.setAttribute('icon', 'pause');
     }
   }
+
+
+  /** @override */
+  updateAriaLabel() {
+    const LocIds = shaka.ui.Locales.Ids;
+    const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;
+
+    this.button.ariaLabel = this.localization.resolve(label);
+  }
 };
diff --git a/ui/locales/en.json b/ui/locales/en.json
@@ -27,6 +27,7 @@
   "PICTURE_IN_PICTURE": "Picture-in-Picture",
   "PLAY": "Play",
   "PLAYBACK_RATE": "Playback speed",
+  "REPLAY": "Replay",
   "RESOLUTION": "Resolution",
   "REWIND": "Rewind",
   "SEEK": "Seek",

diff --git a/ui/locales/source.json b/ui/locales/source.json
@@ -113,6 +113,10 @@
     "message": "Playback speed",
     "description": "Label for a button used to navigate to a submenu to choose the playback speed in the video player."
   },
+  "REPLAY": {
+    "description": "Label for a button used to replay the video in a video player.",
+    "message": "Replay"
+  },
   "RESOLUTION": {
     "description": "Label for a button used to open a submenu to choose a video resolution in the video player.",
     "meaning": "Visual quality",

diff --git a/ui/play_button.js b/ui/play_button.js
@@ -9,7 +9,6 @@ goog.provide('shaka.ui.PlayButton');
 
 goog.require('shaka.ads.AdManager');
 goog.require('shaka.ui.Element');
-goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.util.Dom');
 goog.requireType('shaka.ui.Controls');
@@ -95,13 +94,11 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     return this.controls.presentationIsPaused();
   }
 
-  /** @protected */
-  updateAriaLabel() {
-    const LocIds = shaka.ui.Locales.Ids;
-    const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;
-
-    this.button.ariaLabel = this.localization.resolve(label);
-  }
+  /**
+   * Called when the button's aria label needs to change.
+   * To be overridden by subclasses.
+   */
+  updateAriaLabel() {}
 
   /**
    * Called when the button's icon needs to change.

diff --git a/ui/small_play_button.js b/ui/small_play_button.js
@@ -9,6 +9,7 @@ goog.provide('shaka.ui.SmallPlayButton');
 
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.PlayButton');
 
 
@@ -42,6 +43,17 @@ shaka.ui.SmallPlayButton = class extends shaka.ui.PlayButton {
       this.button.textContent = this.isPaused() ? Icons.PLAY : Icons.PAUSE;
     }
   }
+
+  /** @override */
+  updateAriaLabel() {
+    const LocIds = shaka.ui.Locales.Ids;
+    if (this.video.ended) {
+      this.button.ariaLabel = this.localization.resolve(LocIds.REPLAY);
+    } else {
+      const label = this.isPaused() ? LocIds.PLAY : LocIds.PAUSE;
+      this.button.ariaLabel = this.localization.resolve(label);
+    }
+  }
 };