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

[glo71317]

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.

Resolved issues:

1. [x] resolves magento/pwa-studio#3831: AC-2791::Current state of custom controls not announced. (Shopping Bag)

[pwa-studio-bot]

	Messages
:book:	Associated JIRA tickets: AC-2791.
:book:	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
:book:	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by :no_entry_sign: dangerJS against 94e5a12e4cf94261ebb1701a7aa8b150a0070372

[glo71317]

run all tests

[supernova-at]

@magento create issue from PR

[anthoula]

run all tests

[pwa-test-bot[bot]]

Successfully started codebuild job for the following test suites:

lighthouse-desktop
lighthouse-mobile
pr-test
scaffold-pwa
cypress

[dpatil-magento]

run lighthouse-desktop

[pwa-test-bot[bot]]

Successfully started codebuild job for lighthouse-desktop

[dpatil-magento]

run lighthouse-mobile

[pwa-test-bot[bot]]

Successfully started codebuild job for lighthouse-mobile

[dpatil-magento]

run cypress

[pwa-test-bot[bot]]

Successfully started codebuild job for cypress