[med]: Payment page: Chrome: Focus indicator is not clearly visible on all Edges.

[Stutikuls]

Action Performed:

1. Using Chrome + Jaws, open URL staging.new.expensify.com
2. Navigate to Setting using Tab key and press Enter to select it.
3. Navigate to payment using Tab key and press using Enter to select it.
4. Navigate to Payments page using Tab key.
5. Observe the focus indicator on the Payment page.

Expected Result:

All edges of the focus indicator should visible properly.

Actual Result:

All edges of the focus indicator are not visible properly on the payment page content.

Other occurrences

Same issue repro on PR #9207
Same issue also repro on PRs #8970, #8493, #8970, #8876 -Focus indicator is not clearly visible on eye icon.
Same issue repro on PR #9348
Same issue repro on PR #9347 for checkboxes
Same issue repro on PR #9472 for all edges
Same issue repro on PR #9502 for all edges for popup which is available upon right click.

Yes

Area issue was found in:

Payment page

Failed WCAG checkpoints

2.4.7

User impact:

It will create confusion for the keyboard users if there is no clear focus indicator using keyboard.

Suggested resolution:

Make sure to add visible focus indicator on each and every interactive element when receiving focus through tab key using :focus styling as below:
:focus {
outline: 2px solid #d71ef7;
}

Refer to:
https://www.deque.com/blog/accessible-focus-indicators/
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Platform:

Where is this issue occurring?

• Web

**Version Number:**v1.1.49-1
**Reproducible in staging?:**Yes
**Reproducible in production?:**Yes
**Issue reported by:**Stuti

7677_Focus.indicator.is.not.clearly.visible.on.the.controls.mp4

[melvin-bot]

@Stutikuls, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.