Merge branch 'develop' into feature/WRR-381

enactjs · Oct 8, 2024 · deee603 · deee603
2 parents 8e13710 + 9b1419e
commit deee603
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git 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/PageViews.Page` and `sandstone/QuickGuidePanels.Panel` prop `aria-label`
 - `sandstone/QuickGuidePanels` props `closeButtonAriaLabel` and `onClose`
 - `sandstone/Steps` prop `highlightCurrentOnly` to highlight and scale only the current step

diff --git 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
@@ -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);