BUG#AC_2495::Items within actions menu receive keyboard focus when no…

[glo82145]

…t visible.

Description

Items within actions menu receive keyboard focus when not visible.

Environment

Adobe Magento - Venia

Context

Windows 10; Chrome 88;

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 controls for an item in the cart.
2. Note several extra tab stops between the three dots/"kebab" icon button and the first focusable element for the next item in the cart.

Actual Behavior

Items within actions menu ("Move to favorites", "Edit item", "Remove from cart") for items in the cart receive keyboard focus when they are visually hidden.

Expected Behavior

Ensure that keyboard focus does not land on hidden elements.

Related Issue

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

Acceptance

Verification Stakeholders

Specification

Verification Steps

✔️ QA Passed
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 > Add 2 or more product to cart
Navigate to shopping bag > Edit shopping bag
Press Tab to move through the controls for an item in the cart and check several extra tab stops between the three dots/"kebab" icon button and the first focusable element for the next item in the cart.

✖️ Behaviour Before The Fix : The option within 3 dots ("Move to favorites", "Edit item", "Remove from cart") for items in the cart receive keyboard focus when they are visually hidden.

✔️Behaviour After The Fix: The keyboard focus does not land on hidden elements.

Screenshots / Screen Captures (if appropriate)

Breaking Changes (if any)

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. resolves [Issue] BUG#AC_2495::Items within actions menu receive keyboard focus when no… #3827: BUG#AC_2495::Items within actions menu receive keyboard focus when no…

[pwa-studio-bot]

	Fails
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Associated JIRA tickets: AC-2495.
📖	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).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against aafd8d0

[supernova-at]

@magento create issue from PR

The base branch was changed.

[dpatil-magento]

run cypress

[pwa-test-bot]

Successfully started codebuild job for cypress

[pwa-studio-bot]

	Fails
🚫	node failed.
🚫	Cypress tests in the following files did not pass 😔. All tests must pass before this PR can be merged verify block content: Error: Image was 1.4374855388718188% different from saved snapshot with 92661.46782410853 different pixels. See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/block.spec.js/__diff_output__/Page-Builder-Block-Page.diff.png

Log

ERROR ON TASK: cypressTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against aafd8d0

[pwa-studio-bot]

	Fails
🚫	node failed.
🚫	Cypress tests in the following files did not pass 😔. All tests must pass before this PR can be merged user should be able to filter results in Category and Search pages: CypressError: The application redirected to `https://pr-3800.pwa-venia.com/search.html?query=Tops&page=1&price%5Bfilter%5D=100-200%2C100_200&category_uid%5Bfilter%5D=Tops%2C8` more than 20 times. Please check if it's an intended behavior. If so, increase redirectionLimit value in configuration.

Log

ERROR ON TASK: cypressTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against aafd8d0

[dpatil-magento]

run lighthouse-desktop

[pwa-test-bot]

Successfully started codebuild job for lighthouse-desktop

[dpatil-magento]

run lighthouse-mobile

[pwa-test-bot]

Successfully started codebuild job for lighthouse-mobile

[dpatil-magento]

QA Approved.