[Issue] AC-2791::Current state of custom controls not announced. (Shopping Bag)

[m2-assistant[bot]]

trafficstars

This issue is automatically created based on existing pull request: magento/pwa-studio#3792: AC-2791::Current state of custom controls not announced. (Shopping Bag)

---

Description

Current state of custom controls not announced. (Shopping Bag)

Reproduction Steps select "Blouses & Shirts" > select "Susanna Draped Tank" > add product to cart > select bag > select "Edit Shopping Bag" - [NODE][body>div:nth-of-type(1)>:nth-child(1)>:nth-child(3)]

1. With JAWS operating, press Tab to move through the content.
2. When keyboard focus is on accordion, press Enter or Space to activate it.

Actual Behavior Custom controls do not announce the current state of expanded or collapsed. When controls do not provide name, role and/or state, screen reader users will not know their purpose and current state. Examples include:

Actions menu Accordions

Expected Behavior For each accordion which has multiple states (ie expanded, collapsed), ensure the state is communicated to let the user know what will occur when they interact with the accordion. Use the aria-expanded attribute on the button that triggers the expansion, set to true or false to communicate the expanded state.

Related Issue

Closes https://jira.corp.magento.com/browse/AC-2791.

Verification Steps

Pre-Conditions:

1. Have Magento instance with sample data installed
2. Make sure to have pwa studio installed
3. Make sure to have a customer login for front end login

Manual Steps executed:

Login to venia > Navigate to global header accessories or other Add product to cart > select bag > select "Edit Shopping Bag" Enable your screen reader and press Tab to move focus through each accordion content which has multiple states (ie expanded, collapsed), ensure the state is communicated to let the user know what will occur when they interact with the accordion.

✖️ Behaviour Before The Fix : Custom controls do not announce the current state of expanded or collapsed.

✔️Behaviour After The Fix: Custom controls do announce the current state of expanded or collapsed.

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

[supernova-at]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-2813 is successfully created for this GitHub issue.