AC-2790::No visual indication of focus on buttons.

[glo82145]

Description

Description No visual indication of focus on buttons.

Environment Adobe Magento - LUMA

Context Windows 10; Chrome 88;

Reproduction Steps Locations (representative sample):

Search Results Sub-Category landing page Mini Cart Checkout - Shipping Checkout - Review & Payments My Account

1. Press Tab to move through the content. For close button:
2. When keyboard focus is on "X" of one of the Compare Products, press Enter or Space to activate it.

Actual Behavior There is no visual indication of keyboard focus when using TAB or SHIFT+TAB to navigate through controls of the website. Examples include:

Module 02 - Search Results: Page selection buttons (which includes Next ">" and Previous "<") Close button "X" on dialogs

Module 03 - Sub-Category landing page: Page selection buttons (which includes Next ">" and Previous "<") Close button "X" on dialogs

Module 05a - Mini Cart: Close button "X" on dialog

Module 06a - Checkout - Shipping: Close button "X" on "Sign In" dialog

Module 06b - Checkout - Review & Payments: Close button "X" on "Sign In" dialog

Module 08 - My Account: Close button "X" on dialog

Keyboard-only users can become disoriented when focus is not indicated.

Expected Behavior Ensure that when actionable elements receive focus, that it appears on screen and that a visible focus indicator is present.

Related Issue

Closes https://jira.corp.magento.com/browse/AC-2790 Closes https://jira.corp.adobe.com/browse/PWA-2972

Acceptance

Verification Stakeholders

Specification

Verification Steps

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#3939: AC-2790::No visual indication of focus on buttons.

[pwa-studio-bot]

	Messages
:book:	Associated JIRA tickets: AC-2790.
: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 07c3618b86fcd6a990eb78ae24821d2de40b7737

[anthoula]

@magento create issue from PR

[dpatil-magento]

run pr-deploy

[pwa-test-bot[bot]]

Successfully started codebuild job for pr-deploy

[dpatil-magento]

run cypress

[pwa-test-bot[bot]]

Successfully started codebuild job for cypress

[dpatil-magento]

@glo82145 Fix does focus Next Page (>), Previous Page (<), First Page (<<)and Last Page (>>) buttons but it still lacking to focus page numbers (1, 2)

[dpatil-magento]

run cypress

[pwa-test-bot[bot]]

Successfully started codebuild job for cypress

[dpatil-magento]

run lighthouse-desktop

[pwa-test-bot[bot]]

Successfully started codebuild job for lighthouse-desktop

[dpatil-magento]

run lighthouse-mobile

[pwa-test-bot[bot]]

Successfully started codebuild job for lighthouse-mobile

[dpatil-magento]

QA Approved.