[a11y] InsightsRail tabs lack ARIA tablist/tab — migrate to Tabs primitive

[fedorovvvv]

Source: PRD-018 SC-2 audit — Frontend [W2], Security [W5].

template/src/widgets/insights-rail/ui/InsightsRail.svelte:88-108

Tabs are hand-rolled <nav class="tabs"> + <button class="tab" class:on={...}> with no ARIA tab semantics:

• No role="tablist" on the wrapper.
• No role="tab" / aria-selected on each tab button.
• No aria-controls linking each tab to its panel.

Pre-migration this was the same — so this is preserved status quo, not a regression — but the shared/ui catalogue ships Tabs / TabsList / TabsTrigger (bits-ui-backed) which would deliver these for free. Per rule 24 + PRD-018 SC-2 spirit, swapping is the right move.

Fix

Replace the hand-rolled tabs with the catalogue primitive:

<TabsList aria-label="Insights">
  {#each TABS as t (t.key)}
    <TabsTrigger value={t.key}>
      {t.label}
      {#if t.badge() !== null && t.badge() !== 0}
        <Badge variant="ghost" size="sm" tone="mono">{t.badge()}</Badge>
      {/if}
    </TabsTrigger>
  {/each}
</TabsList>

Local state via $bindable already in place; bits-ui handles arrow-key navigation, roving tabindex, and announcements.

Acceptance

• DevTools Accessibility tree shows tablist on the wrapper, tab on items, aria-selected="true" on the active tab.
• Keyboard: ←/→ moves between tabs, Tab exits the group.
• No visual regression vs current state.

Audit traceability

• Reviewers: Frontend, Security

[fedorovvvv]

Fixed in branch `develop` as part of PRD-019 Wave 3.

What changed (`template/src/widgets/insights-rail/ui/InsightsRail.svelte`)

• Hand-rolled `` + `` replaced with shared/ui's `` / `` / ``.
• TabsList grew a `wrap?: boolean` prop (in shared/ui/tabs/TabsList.svelte) to support multi-row tab rails without reaching into primitive internals from the consumer.
• Bonus from [code-quality] Add FIXME(pointer-capture-race) comment + small cleanups in migrated files #97: `{@const n = t.badge()}` — no more triple-call per render; keyed `{#each TABS as t (t.key)}`.

Browser-verified accessibility tree

```
[role=tablist][aria-label=Insights]
├─ role=tab aria-selected=true "Recent (20)"
├─ role=tab aria-selected=false "Agents (0)"
├─ role=tab aria-selected=false "Blocked (4)"
├─ role=tab aria-selected=false "Drafts"
└─ role=tab aria-selected=false "Health"
```
✅ `role="tablist"` on wrapper, `role="tab"` on each item, `aria-selected="true"` on active.

Acceptance

• DevTools Accessibility tree shows `tablist` on wrapper, `tab` on items, `aria-selected` on active.
• Keyboard: ←/→ moves between tabs (bits-ui default, free).
• No visual regression vs prior state.
• `npm run check` clean.

[fedorovvvv]

Resolved by PR #100 (merged into develop as merge commit 6f498b9). Will reach main with the next release/v* cycle.