From 9b1419ea0163532e2f898c94e748f4b6ba98299b Mon Sep 17 00:00:00 2001
From: Juwon Jeong <juwon.jeong@lge.com>
Date: Mon, 7 Oct 2024 19:13:29 +0900
Subject: [PATCH] WRR-4628: Added `jumpBackwardAriaLabel` and
 `jumpForwardAriaLabel` props to override aria-label of jump buttons (#1715)

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)
---
 CHANGELOG.md                                  |  1 +
 MediaPlayer/MediaControls.js                  | 22 +++++++++++++++++--
 .../sampler/stories/default/VideoPlayer.js    |  4 ++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36cbe9d068..ec98f74cf9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ The following is a curated list of changes in the Enact sandstone module, newest
 ### Added
 
 - `sandstone/Alert` public class names `alert`, `content`, `fullscreen`, and `title`
+- `sandstone/MediaControls` props `jumpBackwardAriaLabel` and `jumpForwardAriaLabel` to override aria-label of jumpButtons
 - `sandstone/Steps` prop `highlightCurrentOnly` to highlight and scale only the current step
 
 ### Changed
diff --git a/MediaPlayer/MediaControls.js b/MediaPlayer/MediaControls.js
index b204c7cb61..1e501b4738 100644
--- a/MediaPlayer/MediaControls.js
+++ b/MediaPlayer/MediaControls.js
@@ -123,6 +123,14 @@ const MediaControlsBase = kind({
 		 */
 		bottomComponents: PropTypes.node,
 
+		/**
+		 * The `aria-label` for the jumpBackward button.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		jumpBackwardAriaLabel: PropTypes.string,
+
 		/**
 		 * Jump backward {@link sandstone/Icon.Icon|icon} name. Accepts any
 		 * {@link sandstone/Icon.Icon|icon} component type.
@@ -141,6 +149,14 @@ const MediaControlsBase = kind({
 		 */
 		jumpButtonsDisabled: PropTypes.bool,
 
+		/**
+		 * The `aria-label` for the jumpForward button.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		jumpForwardAriaLabel: PropTypes.string,
+
 		/**
 		 * Jump forward {@link sandstone/Icon.Icon|icon} name. Accepts any
 		 * {@link sandstone/Icon.Icon|icon} component type.
@@ -348,8 +364,10 @@ const MediaControlsBase = kind({
 		actionGuideShowing,
 		children,
 		id,
+		jumpBackwardAriaLabel,
 		jumpBackwardIcon,
 		jumpButtonsDisabled,
+		jumpForwardAriaLabel,
 		jumpForwardIcon,
 		bottomComponents,
 		mediaControlsRef,
@@ -379,9 +397,9 @@ const MediaControlsBase = kind({
 		return (
 			<OuterContainer {...rest} id={id} mediaControlsRef={mediaControlsRef} spotlightId={spotlightId}>
 				<Container className={css.mediaControls} spotlightDisabled={spotlightDisabled} onKeyDown={onKeyDownFromMediaButtons}>
-					{noJumpButtons ? null : <MediaButton aria-label={$L('Previous')} backgroundOpacity="transparent" css={css} disabled={mediaDisabled || jumpButtonsDisabled} icon={jumpBackwardIcon} onClick={onJumpBackwardButtonClick} size="large" spotlightDisabled={spotlightDisabled} />}
+					{noJumpButtons ? null : <MediaButton aria-label={jumpBackwardAriaLabel || $L('Previous')} backgroundOpacity="transparent" css={css} disabled={mediaDisabled || jumpButtonsDisabled} icon={jumpBackwardIcon} onClick={onJumpBackwardButtonClick} size="large" spotlightDisabled={spotlightDisabled} />}
 					<MediaButton aria-label={paused ? $L('Play') : $L('Pause')} className={spotlightDefaultClass} backgroundOpacity="transparent" css={css} disabled={mediaDisabled || playPauseButtonDisabled} icon={paused ? playIcon : pauseIcon} onClick={onPlayButtonClick} size="large" spotlightDisabled={spotlightDisabled} />
-					{noJumpButtons ? null : <MediaButton aria-label={$L('Next')} backgroundOpacity="transparent" css={css} disabled={mediaDisabled || jumpButtonsDisabled} icon={jumpForwardIcon} onClick={onJumpForwardButtonClick} size="large" spotlightDisabled={spotlightDisabled} />}
+					{noJumpButtons ? null : <MediaButton aria-label={jumpForwardAriaLabel || $L('Next')} backgroundOpacity="transparent" css={css} disabled={mediaDisabled || jumpButtonsDisabled} icon={jumpForwardIcon} onClick={onJumpForwardButtonClick} size="large" spotlightDisabled={spotlightDisabled} />}
 				</Container>
 				{actionGuideShowing ?
 					<ActionGuide id={`${id}_actionGuide`} aria-label={actionGuideAriaLabel != null ? actionGuideAriaLabel : null} buttonAriaLabel={actionGuideButtonAriaLabel} css={css} className={actionGuideClassName} icon="arrowsmalldown" onClick={onActionGuideClick} disabled={actionGuideDisabled}>{actionGuideLabel}</ActionGuide> :
diff --git a/samples/sampler/stories/default/VideoPlayer.js b/samples/sampler/stories/default/VideoPlayer.js
index 46a713c6ad..48dd8addee 100644
--- a/samples/sampler/stories/default/VideoPlayer.js
+++ b/samples/sampler/stories/default/VideoPlayer.js
@@ -173,8 +173,10 @@ export const _VideoPlayer = (args) => {
 				</infoComponents>
 				<MediaControls
 					actionGuideButtonAriaLabel={args['actionGuideButtonAriaLabel']}
+					jumpBackwardAriaLabel={args['jumpBackwardAriaLabel']}
 					jumpBackwardIcon={args['jumpBackwardIcon']}
 					jumpButtonsDisabled={args['jumpButtonsDisabled']}
+					jumpForwardAriaLabel={args['jumpForwardAriaLabel']}
 					jumpForwardIcon={args['jumpForwardIcon']}
 					noJumpButtons={args['noJumpButtons']}
 					rateChangeDisabled={args['rateChangeDisabled']}
@@ -238,8 +240,10 @@ text(
 	MediaControlsConfig,
 	''
 );
+text('jumpBackwardAriaLabel', _VideoPlayer, MediaControlsConfig, '');
 select('jumpBackwardIcon', _VideoPlayer, icons, MediaControlsConfig, 'jumpbackward');
 boolean('jumpButtonsDisabled', _VideoPlayer, MediaControlsConfig);
+text('jumpForwardAriaLabel', _VideoPlayer, MediaControlsConfig, '');
 select('jumpForwardIcon', _VideoPlayer, icons, MediaControlsConfig, 'jumpforward');
 boolean('noJumpButtons', _VideoPlayer, MediaControlsConfig);
 boolean('rateChangeDisabled', _VideoPlayer, MediaControlsConfig);