CYS: color swatches are not accessible (#51715)
* Add a11y to the color swatches * Add changelog file
This commit is contained in:
parent
de13a47a2a
commit
2e9ec00dd2
|
@ -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() }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -314,6 +314,10 @@
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
@include visually-hidden();
|
||||
}
|
||||
}
|
||||
|
||||
.theme-card__free {
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: add
|
||||
|
||||
Add a11y to the color swatches
|
Loading…
Reference in New Issue