Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx
View File

@ -173,10 +173,24 @@ function ProductCardFooter( props: { product: Product } ) {
<Icon icon={ 'star-filled' } size={ 16 } /> <Icon icon={ 'star-filled' } size={ 16 } />
</span> </span>
<span className="woocommerce-marketplace__product-card__rating-average"> <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>
<span className="woocommerce-marketplace__product-card__rating-count"> <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> </span>
</> </>
) } ) }