CYS: color swatches are not accessible (#51715)

* Add a11y to the color swatches

* Add changelog file
This commit is contained in:
Maikel Perez 2024-09-28 13:25:55 -03:00 committed by GitHub
parent de13a47a2a
commit 2e9ec00dd2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 78 additions and 24 deletions

View File

@ -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 ) {
extra = <li className="more_palettes">+{ totalPalettes - 4 }</li>;
const descriptionId = useInstanceId(
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() }
</>
);
};

View File

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

View File

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