[A11Y] [Medium] Missing focus indicators and keyboard navigation improvements

[continue]

Accessibility Issue: Focus Indicators and Keyboard Navigation

WCAG Level: AA
Severity: Medium
Category: Keyboard Navigation Issues

Issue Description

The application lacks visible focus indicators for interactive elements. Keyboard-only users cannot see which element is currently focused.

User Impact

• Affected Users: Keyboard-only users, Low vision users
• Severity: Users cannot track their position when navigating with keyboard

Violations Found

File: `styles.css`

Lines: Throughout

Issues:

1. No explicit `:focus` or `:focus-visible` styles defined
2. Relying on browser defaults which may be insufficient
3. Interactive elements (buttons, inputs, links) need visible focus rings

---

Recommended Fix

Add focus styles to `styles.css`:

```css
/* Focus indicators for accessibility */
:focus {
outline: 2px solid var(--brand);
outline-offset: 2px;
}

:focus:not(:focus-visible) {
outline: none;
}

:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3);
}

a:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
```

Testing Instructions

1. Tab through all interactive elements
2. Verify focus ring is clearly visible on dark background
3. Test in Chrome, Firefox, Safari
4. Use Lighthouse accessibility audit

Resources

• WCAG 2.4.7 Focus Visible
• MDN :focus-visible

Acceptance Criteria

• All interactive elements have visible focus indicators
• Focus indicators meet 3:1 contrast ratio
• Keyboard navigation is smooth and predictable
• Manual testing completed

---