Merge pull request #15389 from guardian/doml/highlights-carousel-accessibility

Add carousel aria attributes to highlights container

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -141,7 +141,7 @@ export type Props = {
 	/** The index of the card in a carousel */
 	index?: number;
 	/**
-	 * Useful for videos. Has the form: collection-{collection ID}-{card grouping type}-{card index}
+	 * Useful for IDs. Has the form: collection-{collection ID}-{card grouping type}-{card index}
 	 * For example, the first splash card in the second collection would be: "collection-1-splash-0"
 	 */
 	uniqueId?: string;
@@ -152,7 +152,7 @@ export type Props = {
 	showTopBarDesktop?: boolean;
 	showTopBarMobile?: boolean;
 	trailTextSize?: TrailTextSize;
-	/** A kicker image is seperate to the main media and renders as part of the kicker */
+	/** A kicker image is separate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
 	subtitleSize?: SubtitleSize;
 	/** Determines if the headline should be positioned within the content or outside the content */

dotcom-rendering/src/components/ScrollableHighlights.importable.tsx

@@ -268,23 +268,32 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 		getOphanInfo(frontId);
 
 	return (
-		<div css={containerStyles} data-link-name={ophanFrontName}>
-			<ol
-				data-link-name={ophanComponentLink}
-				data-component={ophanComponentName}
-				data-container-name={'scrollable/highlights'}
+		<div
+			css={containerStyles}
+			data-link-name={ophanFrontName}
+			role="region"
+			aria-roledescription="carousel"
+			aria-label="Highlights"
+			aria-live="polite"
+		>
+			<ul
 				ref={carouselRef}
 				css={[
 					carouselStyles,
 					generateCarouselColumnStyles(carouselLength),
 				]}
+				data-link-name={ophanComponentLink}
+				data-component={ophanComponentName}
+				data-container-name="scrollable/highlights"
 				data-heatphan-type="carousel"
 			>
 				{trails.map((trail) => {
 					return (
 						<li
 							key={trail.url}
 							css={[itemStyles, verticalLineStyles]}
+							role="group"
+							aria-roledescription="slide"
 						>
 							<HighlightsCard
 								format={trail.format}
@@ -304,7 +313,7 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 						</li>
 					);
 				})}
-			</ol>
+			</ul>
 
 			<Hide until="tablet">
 				{showPreviousButton && (

dotcom-rendering/src/components/SlideshowCarousel.importable.tsx

@@ -291,7 +291,7 @@ export const SlideshowCarousel = ({
 							}
 							size="small"
 							disabled={!previousButtonEnabled}
-							aria-label="View next image in slideshow"
+							aria-label="Previous image"
 							// TODO: data-link-name="slideshow carousel left chevron"
 						/>
 
@@ -308,7 +308,7 @@ export const SlideshowCarousel = ({
 							}
 							size="small"
 							disabled={!nextButtonEnabled}
-							aria-label="View previous image in slideshow"
+							aria-label="Next image"
 							// TODO: data-link-name="slideshow carousel right chevron"
 						/>
 					</div>