Make whole component clickable when not expanded. Add accessibility f…

…eatures.
guardian · Oct 10, 2024 · 05beb46 · 05beb46
1 parent 081d97a
commit 05beb46
Showing 1 changed file with 76 additions and 57 deletions.
diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx
@@ -174,75 +174,94 @@ export const ExpandableMarketingCard = ({
 			<div css={fillBarStyles} />
 			<div css={contentStyles}>
 				{!isExpanded ? (
-					<BannersIllustration type="faded" styles={imageTopStyles} />
-				) : (
 					<>
 						<BannersIllustration
-							type="top"
+							type="faded"
 							styles={imageTopStyles}
 						/>
-						<BannersIllustration
-							type="bottom"
-							styles={imageBottomStyles}
-						/>
-					</>
-				)}
-				<section css={summaryStyles}>
-					<div css={headingStyles}>
-						<h2>{heading}</h2>
-						<button
+						<section
+							css={summaryStyles}
+							role="button"
+							tabIndex={0}
 							onClick={() => {
-								if (!isExpanded) {
+								setIsExpanded(true);
+							}}
+							onKeyDown={(event) => {
+								if (event.key === 'Enter') {
 									setIsExpanded(true);
-								} else {
+								}
+								if (event.key === 'Escape') {
 									setIsClosed(true);
 								}
 							}}
-							type="button"
-							css={arrowStyles}
 						>
-							{isExpanded ? (
-								<SvgCross />
-							) : (
-								<SvgChevronDownSingle />
-							)}
-						</button>
-					</div>
-					<div css={kickerStyles}>{kicker}</div>
-				</section>
-				{isExpanded && (
-					<div css={detailsStyles}>
-						<section css={sectionStyles}>
-							<h3>We're independent</h3>
-							<p>
-								With no billionaire owner or shareholders, our
-								journalism is funded by readers
-							</p>
-						</section>
-						<section css={sectionStyles}>
-							<h3>We're open</h3>
-							<p>
-								With misinformation threatening democracy, we
-								keep our fact-based news paywall-free
-							</p>
+							<div css={headingStyles}>
+								<h2>{heading}</h2>
+								<div css={arrowStyles}>
+									<SvgChevronDownSingle />
+								</div>
+							</div>
+							<div css={kickerStyles}>{kicker}</div>
 						</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>
+					</>
+				) : (
+					<>
+						<BannersIllustration
+							type="top"
+							styles={imageTopStyles}
+						/>
+						<BannersIllustration
+							type="bottom"
+							styles={imageBottomStyles}
+						/>
+						<section css={summaryStyles}>
+							<div css={headingStyles}>
+								<h2>{heading}</h2>
+								<button
+									onClick={() => {
+										setIsClosed(true);
+									}}
+									type="button"
+									css={arrowStyles}
+								>
+									<SvgCross />
+								</button>
+							</div>
+							<div css={kickerStyles}>{kicker}</div>
 						</section>
-						<LinkButton
-							priority="tertiary"
-							size="xsmall"
-							href={`${guardianBaseURL}/email-newsletters`}
-							cssOverrides={buttonStyles}
-						>
-							View newsletters
-						</LinkButton>
-					</div>
+						<div css={detailsStyles}>
+							<section css={sectionStyles}>
+								<h3>We're independent</h3>
+								<p>
+									With no billionaire owner or shareholders,
+									our journalism is funded by readers
+								</p>
+							</section>
+							<section css={sectionStyles}>
+								<h3>We're open</h3>
+								<p>
+									With misinformation threatening democracy,
+									we keep our fact-based news paywall-free
+								</p>
+							</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>
+							</section>
+							<LinkButton
+								priority="tertiary"
+								size="xsmall"
+								href={`${guardianBaseURL}/email-newsletters`}
+								cssOverrides={buttonStyles}
+							>
+								View newsletters
+							</LinkButton>
+						</div>
+					</>
 				)}
 			</div>
 		</div>