diff --git a/ui/big_play_button.js b/ui/big_play_button.js index 1afae13390..f846378467 100644 --- 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 index 8c8b6a18be..acff4c6ed3 100644 --- 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 index 9996e3fe1e..0eaa2fde6b 100644 --- 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 index 86f1756f26..0224172553 100644 --- 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 index 7e9c7d5c36..e90554a421 100644 --- 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); + } + } };