Skip to content

Add visually hidden product details when product is button #723

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

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

Conversation

spencercanner
Copy link

@spencercanner spencercanner commented Sep 10, 2020

  • Refactor the product isButton aria-label text into options so it can be customized
  • Update wrapper to include visually hidden product details summary text when isButton is true
    • This is meant to convey the visual elements of the button that are not accessible for screen readers due to the aria-label on the entire container
  • Although the contents of the button can be customized, including the product title and price covers the basic details of the channel-generated buy buttons with isButton set to true

To 🎩 :

  • Create a buy button where isButton is set to true
  • Verify that the visually hidden text is not visible when the product is rendered in an iframe
  • Navigate a virtual cursor to the buy button and verify that the product title and price is announced
  • Verify that a buttonDestination of modal, cart, and checkout all have the appropriate aria-label on the button
  • Verify the visually hidden text is not present in the DOM when isButton is set to false

Browsers:

  • Safari - Mac - VoiceOver
  • Firefox - Windows

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.

1 participant