use <aside> as ad slot wrapper rather than <div> element (#13593)

Author: cemms1

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css, type Interpolation } from '@emotion/react';
 import type { SlotName } from '@guardian/commercial';
 import { adSizes, constants } from '@guardian/commercial';
 import {
@@ -382,6 +382,22 @@ const crosswordBannerMobileAdStyles = css`
 	min-height: ${adSizes.mobilesticky.height + constants.AD_LABEL_HEIGHT}px;
 `;
 
+const AdSlotWrapper = ({
+	children,
+	css: additionalCss,
+	className = 'ad-slot-container',
+}: {
+	children: React.ReactNode;
+	css?: Interpolation;
+	className?: string;
+}) => {
+	return (
+		<aside className={className} css={additionalCss}>
+			{children}
+		</aside>
+	);
+};
+
 export const AdSlot = ({
 	position,
 	display,
@@ -395,7 +411,7 @@ export const AdSlot = ({
 			switch (display) {
 				case ArticleDisplay.Immersive: {
 					return (
-						<div className="ad-slot-container">
+						<AdSlotWrapper>
 							<div
 								id="dfp-ad--right"
 								css={rightAdStyles}
@@ -412,16 +428,13 @@ export const AdSlot = ({
 								data-testid="slot"
 								aria-hidden="true"
 							/>
-						</div>
+						</AdSlotWrapper>
 					);
 				}
 				case ArticleDisplay.Showcase:
 				case ArticleDisplay.NumberedList: {
 					return (
-						<div
-							className="ad-slot-container"
-							css={[showcaseRightColumnContainerStyles]}
-						>
+						<AdSlotWrapper css={showcaseRightColumnContainerStyles}>
 							<div
 								id="dfp-ad--right"
 								css={[rightAdStyles, showcaseRightColumnStyles]}
@@ -438,7 +451,7 @@ export const AdSlot = ({
 								data-testid="slot"
 								aria-hidden="true"
 							/>
-						</div>
+						</AdSlotWrapper>
 					);
 				}
 				case ArticleDisplay.Standard: {
@@ -458,9 +471,7 @@ export const AdSlot = ({
 									}
 								/>
 							</Island>
-							<div
-								id="top-right-ad-slot"
-								className="ad-slot-container"
+							<AdSlotWrapper
 								css={[
 									css`
 										position: static;
@@ -497,7 +508,7 @@ export const AdSlot = ({
 									data-testid="slot"
 									aria-hidden="true"
 								/>
-							</div>
+							</AdSlotWrapper>
 						</>
 					);
 				}
@@ -507,8 +518,7 @@ export const AdSlot = ({
 		case 'right-football': {
 			const slotId = 'dfp-ad--right';
 			return (
-				<div
-					className="ad-slot-container"
+				<AdSlotWrapper
 					css={[
 						css`
 							height: 100%;
@@ -547,12 +557,12 @@ export const AdSlot = ({
 						// Football fixtures pages cannot always support longer right column ads, so limit allowed size
 						data-desktop="300,250"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'comments': {
 			return (
-				<div className="ad-slot-container">
+				<AdSlotWrapper>
 					<div
 						id="dfp-ad--comments"
 						className={[
@@ -568,15 +578,12 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'top-above-nav': {
 			return (
-				<div
-					css={[topAboveNavContainerStyles]}
-					className="ad-slot-container"
-				>
+				<AdSlotWrapper css={[topAboveNavContainerStyles]}>
 					<div
 						id="dfp-ad--top-above-nav"
 						className={[
@@ -591,16 +598,13 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					></div>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'mostpop': {
 			return (
 				<Hide until="tablet">
-					<div
-						className="ad-slot-container"
-						css={[mostPopContainerStyles]}
-					>
+					<AdSlotWrapper css={mostPopContainerStyles}>
 						<div
 							id="dfp-ad--mostpop"
 							className={[
@@ -616,16 +620,13 @@ export const AdSlot = ({
 							data-testid="slot"
 							aria-hidden="true"
 						/>
-					</div>
+					</AdSlotWrapper>
 				</Hide>
 			);
 		}
 		case 'merchandising-high': {
 			return (
-				<div
-					className="ad-slot-container"
-					css={[merchandisingAdContainerStyles]}
-				>
+				<AdSlotWrapper css={[merchandisingAdContainerStyles]}>
 					<div
 						id="dfp-ad--merchandising-high"
 						className={[
@@ -640,15 +641,12 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'merchandising': {
 			return (
-				<div
-					className="ad-slot-container"
-					css={[merchandisingAdContainerStyles]}
-				>
+				<AdSlotWrapper css={merchandisingAdContainerStyles}>
 					<div
 						id="dfp-ad--merchandising"
 						className={[
@@ -662,7 +660,7 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'fronts-banner': {
@@ -672,8 +670,7 @@ export const AdSlot = ({
 					className="top-fronts-banner-ad-container"
 					css={frontsBannerAdTopContainerStyles}
 				>
-					<div
-						className="ad-slot-container"
+					<AdSlotWrapper
 						css={[
 							frontsBannerAdContainerStyles,
 							hasPageskin && frontsBannerCollapseStyles,
@@ -694,7 +691,7 @@ export const AdSlot = ({
 							data-testid="slot"
 							aria-hidden="true"
 						/>
-					</div>
+					</AdSlotWrapper>
 				</div>
 			);
 		}
@@ -721,7 +718,7 @@ export const AdSlot = ({
 		case 'liveblog-inline': {
 			const advertId = `inline${index + 1}`;
 			return (
-				<div
+				<AdSlotWrapper
 					className="ad-slot-container ad-slot-desktop"
 					css={liveblogInlineContainerStyles}
 				>
@@ -740,16 +737,13 @@ export const AdSlot = ({
 						data-testid={`liveblog-inline--${advertId}`}
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'liveblog-inline-mobile': {
 			const advertId = index === 0 ? 'top-above-nav' : `inline${index}`;
 			return (
-				<div
-					className="ad-slot-container ad-slot-mobile"
-					css={liveblogInlineContainerStyles}
-				>
+				<AdSlotWrapper css={liveblogInlineContainerStyles}>
 					<div
 						id={`dfp-ad--${advertId}--mobile`}
 						className={[
@@ -765,15 +759,12 @@ export const AdSlot = ({
 						data-testid={`liveblog-inline-mobile--${advertId}`}
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'liveblog-top': {
 			return (
-				<div
-					className="ad-slot-container"
-					css={[liveBlogTopContainerStyles]}
-				>
+				<AdSlotWrapper css={liveBlogTopContainerStyles}>
 					<div
 						id="dfp-ad--liveblog-top"
 						className={[
@@ -788,13 +779,13 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'mobile-front': {
 			const advertId = index === 0 ? 'top-above-nav' : `inline${index}`;
 			return (
-				<div className="ad-slot-container">
+				<AdSlotWrapper>
 					<div
 						id={`dfp-ad--${advertId}--mobile`}
 						className={[
@@ -812,12 +803,12 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'pageskin': {
 			return (
-				<div className="ad-slot-container">
+				<AdSlotWrapper>
 					<div
 						id="dfp-ad--pageskin-inread"
 						className={[
@@ -836,12 +827,12 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'article-end': {
 			return (
-				<div className="ad-slot-container">
+				<AdSlotWrapper>
 					<div
 						id="dfp-ad--article-end"
 						className={[
@@ -856,12 +847,12 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 		case 'crossword-banner-mobile': {
 			return (
-				<div className="ad-slot-container">
+				<AdSlotWrapper>
 					<div
 						id="dfp-ad--crossword-banner-mobile"
 						className={[
@@ -876,7 +867,7 @@ export const AdSlot = ({
 						data-testid="slot"
 						aria-hidden="true"
 					/>
-				</div>
+				</AdSlotWrapper>
 			);
 		}
 	}