Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add label and role to line item images #739

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

spencercanner
Copy link
Contributor

@spencercanner spencercanner commented Nov 12, 2020

  • Add role of img to the line item image div, and add an aria-label
    • These will be conditionally added, if the image has alt text. Otherwise, we'll be showing the default shopping bag image that doesn't need to be announced to screen readers.
  • Add helper function to the cart to get value for the aria-label
    • It will return the line item variant image alt text if it exists, otherwise will return the line item title (product title). If the line item doesn't have an image, it will return null.

To 🎩 :

  • Add a variant to the cart that has an image with alt text
    • Verify that the line item image div has a role of image
    • Verify that the image alt text is the aria-label on line item image div
    • Verify that screenreaders announce the image and the label
  • Add a variant to the cart that does not have alt text
    • Verify that the line item image div has a role of image
    • Verify that the line item / product title is the aria-label on the line item image div
    • Verify that screenreaders announce the image and the label
  • Add a variant to the cart whose product does not have any images
    • Verify that the default shopping bag image appears for the line item
    • Verify that the line item image div does not have a role or aria-label
    • Verify that screenreaders do not announce the image
  • Chrome
  • Safari/Mac - VoiceOver
  • Firefox/Windows - NVDA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant