Skip to content

Add aria attributes to cart container #725

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 14, 2020

  • Add a role=dialog and aria-modal="true" to the cart container to signify that it's a modal
  • Add aria-labelledby to the container, and connect it to the cart header
    • This involved creating a new method of assigning unique cart ids since the time-based approach resulted in the dom updating every time render was called on the cart
    • The new method adds an index property to the cart class and assigns a value based on the order of cart creation (i.e. if there are 3 carts, the indexes of the components will be 0,1,2)
    • The new index property was also used for the cart note id, instead of the time-based id

To 🎩 :

  • Navigate a virtual cursor to the cart toggle
  • Open the cart by pressing enter on the dialog
  • Verify that the cart is announced as a dialog labelled by the cart title
    • The screen reader should announce the cart title (Cart), followed by dialog or web dialog

Browsers:

  • 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