semantic html

guardian · Oct 10, 2024 · 081d97a · 081d97a
1 parent a2229ea
commit 081d97a
Showing 1 changed file with 36 additions and 37 deletions.
diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx
@@ -109,8 +109,16 @@ const detailsStyles = css`
 	flex-direction: column;
 	gap: ${space[4]}px;
 	margin-bottom: ${space[2]}px;
+`;
+
+const sectionStyles = css`
+	display: flex;
+	flex-direction: column;
+	gap: ${space[3]}px;
+	border-top: 1px solid ${neutral[100]};
+	padding-top: ${space[2]}px;
 
-	h2 {
+	h3 {
 		${headlineBold17};
 	}
 
@@ -121,14 +129,6 @@ const detailsStyles = css`
 	}
 `;
 
-const sectionStyles = css`
-	display: flex;
-	flex-direction: column;
-	gap: ${space[3]}px;
-	border-top: 1px solid ${neutral[100]};
-	padding-top: ${space[2]}px;
-`;
-
 const imageTopStyles = css`
 	position: absolute;
 	top: 0;
@@ -142,6 +142,13 @@ const imageBottomStyles = css`
 
 const buttonStyles = css`
 	z-index: 1;
+	background-color: white;
+	width: fit-content;
+
+	${textSansBold12};
+	${from.wide} {
+		${textSansBold14};
+	}
 `;
 
 interface Props {
@@ -180,9 +187,9 @@ export const ExpandableMarketingCard = ({
 						/>
 					</>
 				)}
-				<div css={summaryStyles}>
+				<section css={summaryStyles}>
 					<div css={headingStyles}>
-						{heading}
+						<h2>{heading}</h2>
 						<button
 							onClick={() => {
 								if (!isExpanded) {
@@ -202,47 +209,39 @@ export const ExpandableMarketingCard = ({
 						</button>
 					</div>
 					<div css={kickerStyles}>{kicker}</div>
-				</div>
+				</section>
 				{isExpanded && (
 					<div css={detailsStyles}>
-						<div css={sectionStyles}>
-							<h2>We're independent</h2>
+						<section css={sectionStyles}>
+							<h3>We're independent</h3>
 							<p>
 								With no billionaire owner or shareholders, our
 								journalism is funded by readers
 							</p>
-						</div>
-						<div css={sectionStyles}>
-							<h2>We're open</h2>
+						</section>
+						<section css={sectionStyles}>
+							<h3>We're open</h3>
 							<p>
 								With misinformation threatening democracy, we
 								keep our fact-based news paywall-free
 							</p>
-						</div>
-						<div css={sectionStyles}>
-							<h2>We're global</h2>
+						</section>
+						<section css={sectionStyles}>
+							<h3>We're global</h3>
 							<p>
 								With 200 years of history and staff across
 								America and the world, we offer an outsider
 								perspective on US news
 							</p>
-						</div>
-						<div css={buttonStyles}>
-							<LinkButton
-								priority="tertiary"
-								size="xsmall"
-								href={`${guardianBaseURL}/email-newsletters`}
-								cssOverrides={css`
-									background-color: white;
-									${textSansBold12};
-									${from.wide} {
-										${textSansBold14};
-									}
-								`}
-							>
-								View newsletters
-							</LinkButton>
-						</div>
+						</section>
+						<LinkButton
+							priority="tertiary"
+							size="xsmall"
+							href={`${guardianBaseURL}/email-newsletters`}
+							cssOverrides={buttonStyles}
+						>
+							View newsletters
+						</LinkButton>
 					</div>
 				)}
 			</div>