Add a visible focus indicator to tab triggers and tab panel (WCAG 2.4.7)

[gabitoesmiapodo]

Priority

Medium — should be addressed soon

User story / Problem statement

Currently, tab triggers and the tab panel remove the focus outline without a visible replacement (WCAG 2.4.7): TabTrigger sets outline-none and only changes text color on focus (src/components/ui/Tabs.tsx:33); the scrollable panel TAB_CONTENT_CLASS is outline-none with no replacement (src/components/HomeTabs.tsx:11) and Radix makes it focusable (tabindex 0). Keyboard users lose track of focus on these controls.

Expected outcome

Tab triggers and the focusable tab panel show a visible focus indicator on keyboard focus.

Acceptance criteria

• TabTrigger shows a visible focus indicator on keyboard focus.
• The focusable tab panel shows a visible focus indicator on keyboard focus.

Technical notes

Add focus-visible:shadow-focus (or a ring) to both src/components/ui/Tabs.tsx:33 and src/components/HomeTabs.tsx:11. The Tooltip trigger already does this in src/components/ui/Tooltip.tsx:21 — reuse that pattern.

Additional context

Part of epic #28. Severity: Moderate. WCAG 2.2 SC 2.4.7 Focus Visible.