From 7af969df879fe5bfacf36e748dc62afda36d9ace Mon Sep 17 00:00:00 2001
From: DanielCliftonGuardian
<110032454+DanielCliftonGuardian@users.noreply.github.com>
Date: Tue, 30 Dec 2025 14:15:57 +0000
Subject: [PATCH 1/2] Add aria-labels to buttons for WCAG 4.1.2 compliance
---
dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx | 1 +
.../src/components/EditionSwitcherBanner.importable.tsx | 1 +
.../components/SignInGate/gateDesigns/SignInGateAuxiaV1.tsx | 1 +
.../components/SignInGate/gateDesigns/SignInGateAuxiaV2.tsx | 2 ++
.../marketing/banners/designableBanner/DesignableBanner.tsx | 5 +++++
.../components/DesignableBannerCloseButton.tsx | 1 +
6 files changed, 11 insertions(+)
diff --git a/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx b/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx
index 51cf1d8e012..e31997e22ff 100644
--- a/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx
+++ b/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx
@@ -349,6 +349,7 @@ export const AudioAtom = ({
data-testid={isPlaying ? 'pause-button' : 'play-button'}
onClick={() => (isPlaying ? pauseAudio() : playAudio())}
css={buttonStyle}
+ aria-label={isPlaying ? 'Pause' : 'Play'}
>
{isPlaying ? : }
diff --git a/dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx b/dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx
index 83d896563e6..49a1a0d683c 100644
--- a/dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx
+++ b/dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx
@@ -108,6 +108,7 @@ export const EditionSwitcherBanner = ({ pageId, edition }: Props) => {
type="button"
css={closeButton}
data-link-name="edition-switcher-banner close-banner"
+ aria-label="Close banner"
onClick={() => {
hideEditionSwitcherBanner();
}}
diff --git a/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV1.tsx b/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV1.tsx
index bdff923c89c..1766082de6a 100644
--- a/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV1.tsx
+++ b/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV1.tsx
@@ -67,6 +67,7 @@ export const SignInGateAuxiaV1 = ({
data-testid="sign-in-gate-main_dismiss"
data-ignore="global-link-styling"
css={dismissButtonStyles}
+ aria-label="Dismiss sign-in gate"
onClick={() => {
dismissGate();
trackLink(
diff --git a/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV2.tsx b/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV2.tsx
index e4d146f189b..1caf57040dd 100644
--- a/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV2.tsx
+++ b/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV2.tsx
@@ -144,6 +144,7 @@ export const SignInGateAuxiaV2 = ({
data-testid="sign-in-gate-main_dismiss"
data-ignore="global-link-styling"
css={dismissButtonStyles}
+ aria-label="Dismiss sign-in gate"
onClick={() => {
dismissGate();
trackLink(
@@ -189,6 +190,7 @@ export const SignInGateAuxiaV2 = ({
data-testid="sign-in-gate-main_dismiss"
data-ignore="global-link-styling"
css={signInDismissButtonStyles}
+ aria-label="Dismiss sign-in gate"
onClick={() => {
dismissGate();
trackLink(
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
index e849f6cfb1b..52dba52d197 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
@@ -449,6 +449,11 @@ const DesignableBanner: ReactComponent = ({
'secondary',
)}
hideLabel={true}
+ aria-label={
+ isCollapsed
+ ? 'Expand banner'
+ : 'Collapse banner'
+ }
/>
)}
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx
index d81a195de98..07104d88685 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx
@@ -55,6 +55,7 @@ export function DesignableBannerCloseButton({
icon={}
size="small"
hideLabel={true}
+ aria-label="Close banner"
>
Close
From 3826fc7158cca61673893d0486b294554997a1a4 Mon Sep 17 00:00:00 2001
From: DanielCliftonGuardian
<110032454+DanielCliftonGuardian@users.noreply.github.com>
Date: Mon, 5 Jan 2026 12:22:10 +0000
Subject: [PATCH 2/2] Pass label as a child of button
---
.../banners/designableBanner/DesignableBanner.tsx | 11 +++++------
.../components/DesignableBannerCloseButton.tsx | 1 -
2 files changed, 5 insertions(+), 7 deletions(-)
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
index 52dba52d197..058cf7d1e52 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
@@ -449,12 +449,11 @@ const DesignableBanner: ReactComponent = ({
'secondary',
)}
hideLabel={true}
- aria-label={
- isCollapsed
- ? 'Expand banner'
- : 'Collapse banner'
- }
- />
+ >
+ {isCollapsed
+ ? 'Expand banner'
+ : 'Collapse banner'}
+
)}
{!isCollapsableBanner && (
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx
index 07104d88685..d81a195de98 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/components/DesignableBannerCloseButton.tsx
@@ -55,7 +55,6 @@ export function DesignableBannerCloseButton({
icon={}
size="small"
hideLabel={true}
- aria-label="Close banner"
>
Close