CYS: color swatches are not accessible (#51715)

* Add a11y to the color swatches

* Add changelog file

plugins/woocommerce-admin/client/customize-store/intro/color-palettes.tsx

@@ -1,8 +1,16 @@
+/**
+ * External dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { ColorPalette } from './types';
 
+const MAX_COLOR_PALETTES = 4;
+
 export const ColorPalettes = ( {
 	colorPalettes,
 	totalPalettes,
@@ -10,17 +18,52 @@ export const ColorPalettes = ( {
 	colorPalettes: ColorPalette[];
 	totalPalettes: number;
 } ) => {
-	let extra = null;
+	const canFit = totalPalettes <= MAX_COLOR_PALETTES;
 
-	if ( totalPalettes > 4 ) {
+	const descriptionId = useInstanceId(
-		extra = <li className="more_palettes">+{ totalPalettes - 4 }</li>;
+		ColorPalettes,
+		'color-palettes-description'
+	) as string;
+
+	function renderMore() {
+		if ( canFit ) return null;
+		return (
+			<li aria-hidden="true" className="more_palettes">
+				+{ totalPalettes - 4 }
+			</li>
+		);
+	}
+
+	function renderDescription() {
+		if ( canFit ) return null;
+		return (
+			<p
+				id={ descriptionId }
+				className="theme-card__color-palettes-description"
+			>
+				{ sprintf(
+					/* translators: $d is the total amount of color palettes */
+					__(
+						'There are a total of %d color palettes',
+						'woocommerce'
+					),
+					totalPalettes
+				) }
+			</p>
+		);
 	}
 
 	return (
-		<ul className="theme-card__color-palettes">
+		<>
+			<ul
+				className="theme-card__color-palettes"
+				aria-label={ __( 'Color palettes', 'woocommerce' ) }
+				aria-describedby={ descriptionId }
+			>
 				{ colorPalettes.map( ( colorPalette ) => (
 					<li
 						key={ colorPalette.title }
+						aria-label={ colorPalette.title }
 						style={ {
 							background:
 								'linear-gradient(to right, ' +
@@ -34,9 +77,12 @@ export const ColorPalettes = ( {
 								' 100%' +
 								')',
 						} }
-				></li>
+					/>
 				) ) }
-			{ extra }
+				{ renderMore() }
 			</ul>
+
+			{ renderDescription() }
+		</>
 	);
 };

plugins/woocommerce-admin/client/customize-store/intro/intro.scss

@@ -314,6 +314,10 @@
 					text-align: center;
 				}
 			}
+
+			&-description {
+				@include visually-hidden();
+			}
 		}
 
 		.theme-card__free {

plugins/woocommerce/changelog/add-51574

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add a11y to the color swatches