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,33 +18,71 @@ 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">
+		<>
-			{ colorPalettes.map( ( colorPalette ) => (
+			<ul
-				<li
+				className="theme-card__color-palettes"
-					key={ colorPalette.title }
+				aria-label={ __( 'Color palettes', 'woocommerce' ) }
-					style={ {
+				aria-describedby={ descriptionId }
-						background:
+			>
-							'linear-gradient(to right, ' +
+				{ colorPalettes.map( ( colorPalette ) => (
-							colorPalette.primary +
+					<li
-							' 0px, ' +
+						key={ colorPalette.title }
-							colorPalette.primary +
+						aria-label={ colorPalette.title }
-							' 50%, ' +
+						style={ {
-							colorPalette.secondary +
+							background:
-							' 50%, ' +
+								'linear-gradient(to right, ' +
-							colorPalette.secondary +
+								colorPalette.primary +
-							' 100%' +
+								' 0px, ' +
-							')',
+								colorPalette.primary +
-					} }
+								' 50%, ' +
-				></li>
+								colorPalette.secondary +
-			) ) }
+								' 50%, ' +
-			{ extra }
+								colorPalette.secondary +
-		</ul>
+								' 100%' +
+								')',
+						} }
+					/>
+				) ) }
+				{ 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