pwa-studio
pwa-studio copied to clipboard
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.
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)]
- Mouse over a primary navigation item with sub-items, such as "Bottoms", to observe the sub-items revealed on hover.
- 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:
-
Have Magento instance with sample data installed
-
Make sure to have pwa studio installed
-
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:
- [x] resolves magento/pwa-studio#3829: AC-2787 Keyboard only users are not able to access sub-navigation links
| Messages | |
|---|---|
| :book: |
Associated JIRA tickets: PWA-2811. |
| :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 66e2c75865c2f8136c7bf8cd7223a164261bf770
@magento create issue from PR
run all tests
Successfully started codebuild job for the following test suites:
lighthouse-mobile
pr-test
scaffold-pwa
cypress
lighthouse-desktop
| Fails | |
|---|---|
| :no_entry_sign: |
|
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 :no_entry_sign: dangerJS against 66e2c75865c2f8136c7bf8cd7223a164261bf770
run cypress
Successfully started codebuild job for cypress
@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.
run cypress
Successfully started codebuild job for cypress
run cypress @authuser
Successfully started codebuild job for cypress with tags @authuser
run lighthouse-desktop
Successfully started codebuild job for lighthouse-desktop
run lighthouse-mobile
Successfully started codebuild job for lighthouse-mobile
QA Approve.\