AC-2787 Keyboard only users are not able to access sub-navigation links

[glo82145]

Description

Keyboard only users are not able to access sub-navigation links.

Closes PWA-2811

Environment
Adobe Magento - Venia

Context
Windows 10; Chrome 88;

Reproduction Steps
[NODE][body>div:nth-of-type(1)>:nth-child(1)>:nth-child(2)]

1. Mouse over a primary navigation item with sub-items, such as "Bottoms", to observe the sub-items revealed on hover.
2. Press Tab to move through the content; observe that sub-items are not revealed on keyboard focus.

Actual Behavior
Sub-navigation links revealed on mouse hover are not made visible on keyboard focus. These links cannot be accessed by keyboard-only users.

Expected Behavior
Ensure that all functionality can be activated using a keyboard alone. Content revealed on mouse hover should also be revealed on keyboard focus, or else another mechanism should be provided to access these sub-navigation items.

Related Issue

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

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 > Navigate to global header accessories or other
Press Tab to move through the content and observe that sub-items are revealed on keyboard focus
Access to sub-navigation links revealed on tab

✖️ Behaviour Before The Fix : Sub-navigation links revealed on mouse hover are not made visible on keyboard focus. These links cannot be accessed by keyboard-only users.

✔️Behaviour After The Fix: All functionality is activated using a keyboard alone.

Test scenario(s) for direct fix/feature

Test scenario(s) for any existing impacted features/areas

Test scenario(s) for any Magento Backend Supported Configurations

Is Browser/Device testing needed?

Any ad-hoc/edge case scenarios that need to be considered?

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] AC-2787 Keyboard only users are not able to access sub-navigation links #3829: AC-2787 Keyboard only users are not able to access sub-navigation links

[pwa-studio-bot]

	Messages
📖	Associated JIRA tickets: PWA-2811.
📖	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 66e2c75

[supernova-at]

@magento create issue from PR

[anthoula]

run all tests

[pwa-test-bot]

Successfully started codebuild job for the following test suites:

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

[pwa-studio-bot]

	Fails
🚫	node failed.

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 66e2c75

[dpatil-magento]

run cypress

[pwa-test-bot]

Successfully started codebuild job for cypress

[dpatil-magento]

@glo82145 When I click on category link > Category loads thats good but after clicking soft-overlay does not close. User has to make one more click outside to get that closed. Please take a look.

[dpatil-magento]

run cypress

[pwa-test-bot]

Successfully started codebuild job for cypress

[dpatil-magento]

run cypress @authuser

[pwa-test-bot]

Successfully started codebuild job for cypress with tags @authuser

[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 Approve.\