Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

add missing aria-label for stars image in review-list-item component #3706

Merged
merged 1 commit into from Jan 20, 2021

Conversation

ralucaStan
Copy link
Contributor

@ralucaStan ralucaStan commented Jan 19, 2021

This PR adds an aria-label for the stars image in the review-list-item component for a11y purposes.

Fixes #1675

Accessibility

  • I've tested using only a keyboard (no mouse)
  • I've tested using a screen reader

Screenshots

How to test the changes in this Pull Request:

  1. Insert All reviews block into a page
  2. Use the developer tools to inspect one of the review items in the Reviews list
  3. Select the div containing the start image
  4. Make sure it has role="img" & aria-label="Rated X out of 5"
  5. Check that the child span has the same text content as the aria-label attribute

Changelog

Add missing aria-label for stars image in the review-list-item component.

@ralucaStan ralucaStan added status: needs review focus: accessibility The issue/PR is related to accessibility. labels Jan 19, 2021
@ralucaStan ralucaStan added this to the 4.4.0 milestone Jan 19, 2021
@ralucaStan ralucaStan requested a review from a team as a code owner January 19, 2021 15:20
@ralucaStan ralucaStan self-assigned this Jan 19, 2021
@ralucaStan ralucaStan requested review from Aljullu and removed request for a team January 19, 2021 15:20
@github-actions
Copy link
Contributor

Size Change: +44 B (0%)

Total Size: 1.18 MB

Filename Size Change
build/all-reviews.js 9.9 kB +11 B (0%)
build/reviews-by-category.js 11.9 kB +11 B (0%)
build/reviews-by-product.js 13.5 kB +11 B (0%)
build/reviews-frontend.js 9.52 kB +11 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/active-filters-frontend.js 8.74 kB 0 B
build/active-filters.js 8.93 kB 0 B
build/all-products-frontend.js 34.7 kB 0 B
build/all-products.js 36.6 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 3.31 kB 0 B
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 335 B 0 B
build/atomic-block-components/add-to-cart-frontend.js 9.18 kB 0 B
build/atomic-block-components/add-to-cart.js 7.68 kB 0 B
build/atomic-block-components/button-frontend.js 2.33 kB 0 B
build/atomic-block-components/button.js 840 B 0 B
build/atomic-block-components/category-list-frontend.js 469 B 0 B
build/atomic-block-components/category-list.js 475 B 0 B
build/atomic-block-components/image-frontend.js 1.68 kB 0 B
build/atomic-block-components/image.js 1.13 kB 0 B
build/atomic-block-components/price-frontend.js 2.29 kB 0 B
build/atomic-block-components/price.js 2.31 kB 0 B
build/atomic-block-components/rating-frontend.js 522 B 0 B
build/atomic-block-components/rating.js 530 B 0 B
build/atomic-block-components/sale-badge-frontend.js 858 B 0 B
build/atomic-block-components/sale-badge.js 864 B 0 B
build/atomic-block-components/sku-frontend.js 388 B 0 B
build/atomic-block-components/sku.js 393 B 0 B
build/atomic-block-components/stock-indicator-frontend.js 567 B 0 B
build/atomic-block-components/stock-indicator.js 573 B 0 B
build/atomic-block-components/summary-frontend.js 917 B 0 B
build/atomic-block-components/summary.js 927 B 0 B
build/atomic-block-components/tag-list-frontend.js 465 B 0 B
build/atomic-block-components/tag-list.js 472 B 0 B
build/atomic-block-components/title-frontend.js 1.35 kB 0 B
build/atomic-block-components/title.js 1.21 kB 0 B
build/attribute-filter-frontend.js 18.2 kB 0 B
build/attribute-filter.js 12.5 kB 0 B
build/blocks-checkout.js 11.9 kB 0 B
build/blocks.js 3.49 kB 0 B
build/cart-frontend.js 77.5 kB 0 B
build/cart.js 41.2 kB 0 B
build/checkout-frontend.js 92.7 kB 0 B
build/checkout.js 43.5 kB 0 B
build/editor-rtl.css 14.9 kB 0 B
build/editor.css 14.9 kB 0 B
build/featured-category.js 7.82 kB 0 B
build/featured-product.js 10 kB 0 B
build/handpicked-products.js 7.5 kB 0 B
build/price-filter-frontend.js 15 kB 0 B
build/price-filter.js 10.3 kB 0 B
build/product-best-sellers.js 7.57 kB 0 B
build/product-categories.js 3.24 kB 0 B
build/product-category.js 8.51 kB 0 B
build/product-new.js 7.74 kB 0 B
build/product-on-sale.js 8.13 kB 0 B
build/product-search.js 3.57 kB 0 B
build/product-tag.js 6.57 kB 0 B
build/product-top-rated.js 7.71 kB 0 B
build/products-by-attribute.js 8.49 kB 0 B
build/single-product-frontend.js 37.9 kB 0 B
build/single-product.js 10.3 kB 0 B
build/style-rtl.css 18.7 kB 0 B
build/style.css 18.7 kB 0 B
build/vendors--atomic-block-components/price-frontend.js 5.73 kB 0 B
build/vendors-style-rtl.css 1.05 kB 0 B
build/vendors-style.css 1.05 kB 0 B
build/vendors.js 435 kB 0 B
build/wc-blocks-data.js 6.91 kB 0 B
build/wc-blocks-middleware.js 931 B 0 B
build/wc-blocks-registry.js 2.39 kB 0 B
build/wc-payment-method-bacs.js 775 B 0 B
build/wc-payment-method-cheque.js 771 B 0 B
build/wc-payment-method-cod.js 866 B 0 B
build/wc-payment-method-paypal.js 813 B 0 B
build/wc-payment-method-stripe.js 12.1 kB 0 B
build/wc-settings.js 2.4 kB 0 B
build/wc-shared-context.js 1.53 kB 0 B
build/wc-shared-hocs.js 1.68 kB 0 B

compressed-size-action

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is testing well. I tested with Orca screen reader and it correctly read the rating. Code also looks good, good job! 👌

@ralucaStan ralucaStan merged commit e9263d5 into trunk Jan 20, 2021
@ralucaStan ralucaStan deleted the fix/1675-ratings-aria-label branch January 20, 2021 12:45
@mikejolley mikejolley added the type: bug The issue/PR concerns a confirmed bug. label Feb 1, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: accessibility The issue/PR is related to accessibility. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Reviews blocks: rating has role="img" but missing aria-label
3 participants