Merge pull request #14308 from guardian/jm/feat-focus-designable-banner-when-visible

feat: add focus management for interactive choice cards in DesignableBanner

Author: juabara

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -23,7 +23,7 @@ import type {
 	Image,
 } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
 	removeMediaRulePrefix,
 	useMatchMedia,
@@ -137,6 +137,14 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 		);
 	}, []);
 
+	const bannerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (bannerRef.current) {
+			bannerRef.current.focus();
+		}
+	}, []);
+
 	useEffect(() => {
 		if (iosAppBannerPresent) {
 			// send ophan event
@@ -275,6 +283,9 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 
 	return (
 		<div
+			ref={bannerRef}
+			role="alert"
+			tabIndex={-1}
 			css={styles.outerContainer(
 				templateSettings.containerSettings.backgroundColour,
 				iosAppBannerPresent,