Add screen reader text for ratings data on product cards

This commit is contained in:
KokkieH 2024-09-20 09:13:46 +02:00
parent 9c58f198cf
commit 2d8d7b2899
1 changed files with 16 additions and 2 deletions

View File

@ -173,10 +173,24 @@ function ProductCardFooter( props: { product: Product } ) {
<Icon icon={ 'star-filled' } size={ 16 } />
</span>
<span className="woocommerce-marketplace__product-card__rating-average">
{ product.averageRating }
<span aria-hidden>{ product.averageRating }</span>
<span className="screen-reader-text">
{ sprintf(
// translators: %.1f: average rating
__( '%.1f stars', 'woocommerce' ),
product.averageRating
) }
</span>
</span>
<span className="woocommerce-marketplace__product-card__rating-count">
({ product.reviewsCount })
<span aria-hidden>({ product.reviewsCount })</span>
<span className="screen-reader-text">
{ sprintf(
// translators: %d: average rating
__( 'from %d reviews', 'woocommerce' ),
product.reviewsCount
) }
</span>
</span>
</>
) }