Add accessibility feature to progress bar

Author: domlander

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -85,11 +85,13 @@ export const LoopVideoPlayer = forwardRef(
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
+		const loopVideoId = `loop-video-${videoId}`;
+
 		return (
 			<>
 				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Captions will be considered later. */}
 				<video
-					id={`loop-video-${videoId}`}
+					id={loopVideoId}
 					ref={ref}
 					preload="none"
 					loop={true}
@@ -138,6 +140,7 @@ export const LoopVideoPlayer = forwardRef(
 							</button>
 						)}
 						<LoopVideoProgressBar
+							videoId={loopVideoId}
 							currentTime={currentTime}
 							duration={ref.current.duration}
 						/>

dotcom-rendering/src/components/LoopVideoProgressBar.tsx

@@ -13,17 +13,37 @@ const styles = (progressPercentage: number) => css`
 `;
 
 type Props = {
+	videoId: string;
 	currentTime: number;
 	duration: number;
 };
 
-export const LoopVideoProgressBar = ({ currentTime, duration }: Props) => {
+/**
+ * A progress bar for the loop video component.
+ *
+ * Why don't we use the <progress /> element?
+ * It was not possible to properly style the native progress element in safari.
+ */
+export const LoopVideoProgressBar = ({
+	videoId,
+	currentTime,
+	duration,
+}: Props) => {
 	if (duration <= 0) return null;
 
 	const progressPercentage = (currentTime * 100) / duration;
 	if (Number.isNaN(progressPercentage)) {
 		return null;
 	}
 
-	return <div role="progressbar" css={styles(progressPercentage)} />;
+	return (
+		<div
+			role="progressbar"
+			aria-labelledby={videoId}
+			aria-valuenow={progressPercentage}
+			aria-valuemin={0}
+			aria-valuemax={100}
+			css={styles(progressPercentage)}
+		/>
+	);
 };