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

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 13, 2025 · ae23903 · ae23903
1 parent 2e2bb68
commit ae23903
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
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>