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

Update accessibility label on cart toggle #731

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

Conversation

spencercanner
Copy link
Contributor

@spencercanner spencercanner commented Sep 18, 2020

  • Add new text option to cart toggle to be used as an accessibility label for the number of items
  • Add getters to the toggle view class to return accessibility labels and visually hidden summary HTML
  • Add new CSS styles to the host.css file, which are the styles that are added to the top-level page. This was required because the visually hidden text is embedded on the page, and not in an iframe.
    • This also fixes a bug where the readableLabel was not being hidden because the shopify-buy--visually-hidden styles were not available
  • Add visuallyhidden text to the toggle count template, so the accessibility text is available in non-iframe mode

To 🎩 :

  • Create a buy button with an iframe toggle that has count set to false in the toggle contents options
  • Navigate a virtual cursor to the cart toggle
    • Verify that it announces Cart button
    • Verify that it does not announce the iframe or its contents
  • Create a buy button with an iframe toggle that has count set to true in the toggle contents options
  • Navigate a virtual cursor to the cart toggle
    • Verify that it announces Cart and the number of items in the cart
    • Verify that it does not announce the iframe or its contents
    • Update the cart quantity and verify that the DOM only contains a single node with the accessibility label outside the iframe
  • Create a buy button with a non-iframe toggle that has count and title set to false in the toggle contents options
  • Navigate a virtual cursor to the cart toggle
    • Verify that the visually hidden title is announced
  • Create a buy button with a non-iframe toggle that has count set to true in the toggle contents options
    • Verify that the visually hidden text is shown (it will be displayed because it's using the styles are not applied in non-iframe mode)
  • Create a buy button with a non-iframe toggle that has the title set to true in the toggle options
    • Verify that the title is only displayed once
  • Chrome - Mac (sanity check)
  • 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.

1 participant