feat: add focus management for interactive choice cards in DesignableBanner

Author: Juarez Mota

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,17 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 		);
 	}, []);
 
+	const bannerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const firstInteractiveChoiceCard = bannerRef.current?.querySelector(
+			'input',
+		) as HTMLElement | null;
+		if (firstInteractiveChoiceCard) {
+			firstInteractiveChoiceCard.focus();
+		}
+	}, []);
+
 	useEffect(() => {
 		if (iosAppBannerPresent) {
 			// send ophan event
@@ -275,6 +286,9 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 
 	return (
 		<div
+			ref={bannerRef}
+			role="alert"
+			tabIndex={-1}
 			css={styles.outerContainer(
 				templateSettings.containerSettings.backgroundColour,
 				iosAppBannerPresent,