pwa-studio icon indicating copy to clipboard operation
pwa-studio copied to clipboard

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

Open glo82145 opened this issue 3 years ago • 10 comments

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.

image

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. [x] resolves magento/pwa-studio#3829: AC-2787 Keyboard only users are not able to access sub-navigation links

glo82145 avatar Apr 27 '22 06:04 glo82145

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

pwa-studio-bot avatar Apr 27 '22 06:04 pwa-studio-bot

@magento create issue from PR

supernova-at avatar May 04 '22 20:05 supernova-at

run all tests

anthoula avatar Sep 15 '22 21:09 anthoula

Successfully started codebuild job for the following test suites:

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

pwa-test-bot[bot] avatar Sep 15 '22 21:09 pwa-test-bot[bot]

Fails
:no_entry_sign:

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 :no_entry_sign: dangerJS against 66e2c75865c2f8136c7bf8cd7223a164261bf770

pwa-studio-bot avatar Sep 15 '22 21:09 pwa-studio-bot

run cypress

devpatil7 avatar Sep 19 '22 16:09 devpatil7

Successfully started codebuild job for cypress

pwa-test-bot[bot] avatar Sep 19 '22 16:09 pwa-test-bot[bot]

@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.

devpatil7 avatar Sep 19 '22 16:09 devpatil7

run cypress

devpatil7 avatar Sep 28 '22 18:09 devpatil7

Successfully started codebuild job for cypress

pwa-test-bot[bot] avatar Sep 28 '22 18:09 pwa-test-bot[bot]

run cypress @authuser

devpatil7 avatar Sep 28 '22 19:09 devpatil7

Successfully started codebuild job for cypress with tags @authuser

pwa-test-bot[bot] avatar Sep 28 '22 19:09 pwa-test-bot[bot]

run lighthouse-desktop

devpatil7 avatar Sep 28 '22 19:09 devpatil7

Successfully started codebuild job for lighthouse-desktop

pwa-test-bot[bot] avatar Sep 28 '22 19:09 pwa-test-bot[bot]

run lighthouse-mobile

devpatil7 avatar Sep 28 '22 19:09 devpatil7

Successfully started codebuild job for lighthouse-mobile

pwa-test-bot[bot] avatar Sep 28 '22 19:09 pwa-test-bot[bot]

QA Approve.\

devpatil7 avatar Sep 28 '22 19:09 devpatil7