🟠 [RGAA 10.7] Focus indicator not sufficiently visible

[jbpenrath]

Bug Report

Problematic behavior
Focus is not sufficiently visible on multiple interactive elements. List and dropdown items receive a gray background on focus with a contrast ratio of only 1.1:1 (#F3F3F4 on #FFFFFF). Blue CTAs have a very subtle focus ring. In the inbox, focus around thread items is not visible on the full element. On the message view, focus on label tags and list items is insufficient.

Expected behavior/code
Focus indicators must have a minimum contrast ratio of 3:1 against the adjacent background. Focus must be visible around the entire perimeter of each interactive element.

Steps to Reproduce

1. Use Tab to navigate through any dropdown list items
2. Observe the gray background — barely distinguishable from white
3. Tab to blue CTAs — focus ring is very subtle
4. In the inbox, Tab through email list items — focus does not outline the full element

Environment

• RGAA Criterion: 10.7
• Severity: 🟠 Major

Possible Solution

• Option 1 (recommended): use the browser's native focus style
• Option 2 (custom focus): ensure ≥ 3:1 contrast; use both outline and border (one light, one dark) for visibility on any background
• Ensure focus is visible around the entire perimeter of every interactive element
• Increase focus visibility on blue CTAs

Additional context/Screenshots
RGAA reference: Criterion 10.7

Current focus contrast on list items: #F3F3F4 / #FFFFFF = 1.1:1 (required: ≥ 3:1)