Set aria-label for checkout links on 3 tier landing page (#6779)

The actual text on these links reads "Support" in every case, with the meaning coming from the context of the card. To make this clearer for screen readers set the aria-text to the product name/label. Also add aria-label to the support once button.
guardian · Feb 14, 2025 · 3b0220d · 3b0220d
1 parent b06b369
commit 3b0220d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/support-e2e/tests/smoke/promo-codes.test.ts b/support-e2e/tests/smoke/promo-codes.test.ts
@@ -20,6 +20,7 @@ import { setTestUserRequiredDetails } from '../utils/testUserDetails';
 		expectedCheckoutTotalText: 'Was £12, now £9.60/month',
 		expectedThankYouText:
 			/You'll pay £(\d|\.)+\/month for the first (\d|\.)+ months, then £(\d|\.)+\/month afterwards unless you cancel\./,
+		accessibleCtaText: 'All-access digital',
 	},
 	{
 		tier: 2,
@@ -31,6 +32,7 @@ import { setTestUserRequiredDetails } from '../utils/testUserDetails';
 		expectedCheckoutTotalText: /Was £(\d|\.)+, now £(\d|\.)+\/year/i,
 		expectedThankYouText:
 			/You'll pay £(\d|\.)+\/year for the first year, then £(\d|\.)+\/year afterwards unless you cancel\./i,
+		accessibleCtaText: 'All-access digital',
 	},
 ].forEach((testDetails) => {
 	test(`${testDetails.expectedCardHeading} ${testDetails.frequency} ${testDetails.promoCode}`, async ({
@@ -42,7 +44,6 @@ import { setTestUserRequiredDetails } from '../utils/testUserDetails';
 		const testFirstName = firstName();
 		const testLastName = lastName();
 		const testEmail = email();
-		const ctaCopy = 'Support';
 
 		await setupPage(
 			page,
@@ -60,8 +61,7 @@ import { setTestUserRequiredDetails } from '../utils/testUserDetails';
 			card.getByText(testDetails.expectedPromoText).first(),
 		).toBeVisible();
 		await page
-			.getByRole('link', { name: ctaCopy })
-			.nth(testDetails.tier - 1)
+			.getByRole('link', { name: testDetails.accessibleCtaText })
 			.click();
 
 		// Checkout

diff --git a/support-frontend/assets/pages/supporter-plus-landing/components/supportOnce.tsx b/support-frontend/assets/pages/supporter-plus-landing/components/supportOnce.tsx
@@ -86,6 +86,7 @@ export function SupportOnce({
 					);
 				}}
 				data-qm-trackable="support-once-button"
+				aria-label="Support once"
 			>
 				Support now
 			</LinkButton>

diff --git a/support-frontend/assets/pages/supporter-plus-landing/components/threeTierCard.tsx b/support-frontend/assets/pages/supporter-plus-landing/components/threeTierCard.tsx
@@ -260,6 +260,7 @@ export function ThreeTierCard({
 					href={link}
 					cssOverrides={btnStyleOverrides}
 					data-qm-trackable={quantumMetricButtonRef}
+					aria-label={label}
 				>
 					{ctaCopy}
 				</LinkButton>