Merge pull request #15064 from guardian/a11y-aria-labels

Add aria-labels to buttons for WCAG 4.1.2 compliance

Author: DanielCliftonGuardian

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 ? <PauseSVG /> : <PlaySVG />}
 					</button>

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();
 					}}

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(

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(

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -449,7 +449,11 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 									'secondary',
 								)}
 								hideLabel={true}
-							/>
+							>
+								{isCollapsed
+									? 'Expand banner'
+									: 'Collapse banner'}
+							</Button>
 						</div>
 					)}
 					{!isCollapsableBanner && (