[low] Chrome: New Group Page: Focus indicator is not visible on all edges.

[Stutikuls]

Action Performed:

1. Using Chrome, open URL staging.new.expensify.com
2. Navigate to (+) button icon using Tab key and press Enter to select it.
3. Navigate and select new group using Enter & Tab key.
4. Navigate to the list items using Tab key.
5. Observe the focus indicator.

Expected Result:

Focus indicator should be clearly visible on the all edges.

Actual Result:

All edges of the focus indicator is not visible.

##Note -
Same issue repro on all pages/sections like -

1. Settings -> Workspace -> More -> New workspace/ Delete Workspace.
2. Settings -> Payment > Payments window etc.

Workaround:

Yes

Area issue was found in:

New Group window

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:

• Web

Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

7530_Focu.indicator.is.not.clearly.visible.on.all.list.elements.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.