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

[m2-assistant]

This issue is automatically created based on existing pull request: #3798: AC-2787 Keyboard only users are not able to access sub-navigation links

---

Description

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

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.

[supernova-at]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

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