AC-2493::Items within actions menu are not operable for keyboard-only…

[glo71317]

Description

Items within actions menu are not operable for keyboard-only users (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. Press Tab to move through the content.
2. When keyboard focus is on options (3 dots/"kebab") menu for a cart item, press Enter or Space to activate it.
3. Tab through each item in the options menu and press Enter or Space to activate.

Actual Behavior There are actionable elements that are not functional with the keyboard alone. Examples include:

Within actions menu:

"Move to favorites" "Edit Item" "Remove from cart"

Keyboard-only users cannot access this functionality. (Note that these controls can be activated when a screen reader is operating.)

Expected Behavior Ensure that all functionality can be activated using keyboard alone.

Related Issue

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

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 > select any product and add it to cart > select bag > select "Edit Shopping Bag" Press Tab to move through the content. When keyboard focus is on options (3 dots/"kebab") menu for a cart item, press Enter or Space to activate it. Tab through each item in the options menu and press Enter or Space to activate.

✖️ Behaviour Before The Fix : There are actionable elements that are not functional with the keyboard alone. Examples include:

Within actions menu: "Edit Item" "Remove from cart"

✔️Behaviour After The Fix: All functionalities are activated using keyboard alone.

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#3832: AC-2493::Items within actions menu are not operable for keyboard-only…

[pwa-studio-bot]

	Messages
:book:	Associated JIRA tickets: AC-2493.
: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 4c8b11b6f3548229b4d849c02567393c9885457c

[glo71317]

run all tests

[supernova-at]

@magento create issue from PR

[devpatil7]

run pr-deploy

[pwa-test-bot[bot]]

Successfully started codebuild job for pr-deploy

[devpatil7]

run pr-test

[pwa-test-bot[bot]]

Successfully started codebuild job for pr-test

[devpatil7]

run cypress

[pwa-test-bot[bot]]

Successfully started codebuild job for cypress

[devpatil7]

Now screen reader announce list items but still there are things like Kebab menu just say button instead of informative text. But its not part of this ticket so merging it once CI jobs pass.