[low] Keyboard Navigation: Payments: Visual focus indicator is not fully visible on several controls

[ogumen]

Action Performed:

Prerequisite: the user is logged in.

1. Using Chrome, open https://staging.new.expensify.com/
2. Navigate to Settings => Payment => Add Payment Method.
3. Once the modal Payments opens, press Tab key to focus the "Back" and "Add payment method" buttons.
4. Note if the elements have a fully visible focus outline.

Expected Result:

All interactive elements should have a clear focus outline all around the element.

Actual Result:

The "Back" button has focus outline only in the left side and bottom/up. The "Add payment method" button has a focus outline only in the bottom part, which makes it hard to understand which element is currently focused.

HTML:
<div dir="auto" class="css-901oao" style="color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; font-weight: 700; line-height: 20px; margin-left: 12px;">Add Payment Method</div>

Workaround:

No workaround

Area issue was found in:

Add payment method flow

Failed WCAG checkpoints

2.4.7

User impact:

The users might have difficulties trying to determine which element is focused.

Suggested resolution:

Ensure that the focus outline is clearly visible around the element on keyboard focus. See: https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html

Platform:

Where is this issue occurring?

• Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

Bug5184180_5184180.mp4

View all open jobs on GitHub