Site Overview: Add accessible name to unlaunched site setup progress ring

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,6 +30,7 @@ export interface OverviewCardProps {
 		value: number;
 		max: number;
 		label: string;
+		ariaValueText?: string;
 		variant?: ComponentProps< typeof CircularProgressBar >[ 'variant' ];
 	};
 	intent?: 'activate' | 'upsell' | 'success' | 'warning' | 'error';
@@ -74,6 +76,7 @@ export default function OverviewCard( {
 	onClick,
 }: OverviewCardProps ) {
 	const { recordTracksEvent } = useAnalytics();
+	const descriptionId = useId();
 
 	const renderHeading = () => {
 		if ( isLoading ) {
@@ -164,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"
@@ -176,6 +180,8 @@ export default function OverviewCard( {
 			</VStack>
 			{ progress && (
 				<CircularProgressBar
+					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,6 +83,12 @@ function VisibilityCardUnlaunched( { site }: { site: Site } ) {
 				value: completedTasks,
 				max: numberOfTasks,
 				label: `${ completedTasks }/${ numberOfTasks }`,
+				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 } ),
 			} }
 		/>

packages/components/src/circular-progress-bar/README.md

@@ -22,3 +22,5 @@ function render() {
 - `numberOfSteps`: a number representing the total number of steps (required).
 - `size`: a number representing the base size of component in pixels (required).
 - `enableDesktopScaling`: a boolean that applys the 'desktop-scaling' class which scales the component size by 1.2x (optional)
+- `ariaLabelledBy`: the id of an element that labels the progress bar, wired to `aria-labelledby` (optional)
+- `ariaValueText`: a human-readable description of the current value (e.g. "2 of 5 steps complete"), wired to `aria-valuetext` (optional)

packages/components/src/circular-progress-bar/index.tsx

@@ -13,6 +13,8 @@ const CircularProgressBar = ( {
 	showProgressText = true,
 	customText,
 	variant,
+	ariaLabelledBy,
+	ariaValueText,
 }: {
 	currentStep: number | null;
 	numberOfSteps: number | null;
@@ -23,6 +25,8 @@ const CircularProgressBar = ( {
 	showProgressText?: boolean;
 	customText?: ReactNode;
 	variant?: 'success';
+	ariaLabelledBy?: string;
+	ariaValueText?: string;
 } ) => {
 	const SIZE = size;
 	const RADIUS = SIZE / 2 - strokeWidth / 2;
@@ -35,6 +39,11 @@ const CircularProgressBar = ( {
 	return (
 		<div
 			role="progressbar"
+			aria-valuemin={ 0 }
+			aria-valuemax={ numberOfSteps }
+			aria-valuenow={ currentStep }
+			aria-valuetext={ ariaValueText }
+			aria-labelledby={ ariaLabelledBy }
 			className={ clsx( 'circular__progress-bar', {
 				'desktop-scaling': enableDesktopScaling,
 				'is-success': variant === 'success',