Site Overview: label setup progress by description, add steps-complete valuetext

Author: p-jackson

client/dashboard/components/overview-card/index.tsx

@@ -11,6 +11,7 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import clsx from 'clsx';
+import { useId } from 'react';
 import { useAnalytics } from '../../app/analytics';
 import { Card, CardBody } from '../../components/card';
 import { isOnboardingUrl, isRelativeUrl } from '../../utils/url';
@@ -29,7 +30,7 @@ export interface OverviewCardProps {
 		value: number;
 		max: number;
 		label: string;
-		ariaLabel?: string;
+		ariaValueText?: string;
 		variant?: ComponentProps< typeof CircularProgressBar >[ 'variant' ];
 	};
 	intent?: 'activate' | 'upsell' | 'success' | 'warning' | 'error';
@@ -75,6 +76,7 @@ export default function OverviewCard( {
 	onClick,
 }: OverviewCardProps ) {
 	const { recordTracksEvent } = useAnalytics();
+	const descriptionId = useId();
 
 	const renderHeading = () => {
 		if ( isLoading ) {
@@ -165,6 +167,7 @@ export default function OverviewCard( {
 							{ renderHeading() }
 						</Heading>
 						<Text
+							id={ descriptionId }
 							intent={ intent === 'warning' || intent === 'error' ? intent : undefined }
 							variant={ intent === 'warning' || intent === 'error' ? undefined : 'muted' }
 							lineHeight="16px"
@@ -177,7 +180,8 @@ export default function OverviewCard( {
 			</VStack>
 			{ progress && (
 				<CircularProgressBar
-					ariaLabel={ progress.ariaLabel }
+					ariaLabelledBy={ description ? descriptionId : undefined }
+					ariaValueText={ progress.ariaValueText }
 					currentStep={ progress.value }
 					numberOfSteps={ progress.max }
 					size={ 80 }

client/dashboard/sites/overview-visibility-card/index.tsx

@@ -1,6 +1,6 @@
 import { siteLaunchpadQuery } from '@automattic/api-queries';
 import { useQuery } from '@tanstack/react-query';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { lockOutline, published } from '@wordpress/icons';
 import { LAUNCHPAD_PERSONALIZATION_EXPERIMENT, normalizeVariation } from 'calypso/lib/ai-launchpad';
 import { useExperiment } from 'calypso/lib/explat';
@@ -83,7 +83,12 @@ function VisibilityCardUnlaunched( { site }: { site: Site } ) {
 				value: completedTasks,
 				max: numberOfTasks,
 				label: `${ completedTasks }/${ numberOfTasks }`,
-				ariaLabel: __( 'Steps to launch your site' ),
+				ariaValueText: sprintf(
+					/* translators: %1$d: number of completed steps, %2$d: total number of steps. e.g. "2 of 5 steps complete" */
+					__( '%1$d of %2$d steps complete' ),
+					completedTasks,
+					numberOfTasks
+				),
 				...( isLaunchpadCompleted && { variant: 'success' as const } ),
 			} }
 		/>