fix: preexisting bugs surfaced in agent review

[alx-xo]

Summary

Fixes 11 preexisting bugs surfaced during automated code review of #352. Stacked on top of the oxfmt formatting branch — no formatting changes here, purely logic/accessibility/security fixes.

State / stale closure

• SegmentedButton: add hoveredId to useMemo deps — memo was returning stale highlighted state after clicks
• TableProvider: remove expandedRowKeys from useCallback deps — unnecessary since toggleExpanded uses the functional updater form (prev) => ...
• useAppLayoutKeys: setCollapsed(!collapsed) → setCollapsed((prev) => !prev) — captured stale collapsed on rapid keypresses

Correctness

• Tabs: || → ?? for tab ID fallback — || treated empty-string IDs as falsy and fell through to the first child
• LanguageIndicator: remove spurious standalone gap class — gap alone is not a valid Tailwind utility; gap-2 already provides spacing
• UserAvatar: wrap color index in Math.abs() — non-letter initials (numbers, symbols) produced a negative index; JS % preserves sign, returning undefined for the color class

Accessibility

• SearchBox: add aria-label="Clear search" and type="button" to icon-only clear button
• KeyHint: replace dismiss div with <button type="button" aria-label="Dismiss"> — div is not keyboard-operable

React warnings

• KeyHint: replace bare <> fragments in modifier/key maps with <React.Fragment key={value-index}> — eliminates missing-key warnings; compound key avoids collisions if a value appears twice

Security

• ExternalPill: add rel="noopener noreferrer" when target="_blank" — prevents reverse-tabnabbing

Test Plan

• 64 Vitest tests passing
• TypeScript type-check passes

[cubic-dev-ai]

No issues found across 4 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/components/AppLayout/useAppLayoutKeys.ts">

<violation number="1">
P1: Toggle uses captured `collapsed` instead of functional updater, causing stale-state behavior on rapid keypresses. Use updater form to make each key event apply to latest state.</violation>
</file>

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Fix all with cubic | Re-trigger cubic</sub>