[a11y][critical] HealthBar theme switcher: ToggleGroup type="single" lost radiogroup semantics

[fedorovvvv]

Source: PRD-018 SC-2 audit, finding [Logic-C1].

template/src/widgets/health-bar/ui/HealthBar.svelte:93-106

The pre-migration theme switcher used role="radiogroup" with three role="radio" items (AUTO / LIGHT / DARK) carrying explicit aria-checked. After migration to <ToggleGroup type="single">, bits-ui renders these as a generic toggle group rather than a radio group. Screen readers will announce "toggle button group" instead of "radio group, 1 of 3 selected".

This is a silent a11y regression versus the pre-migration code.

Repro / Verification

1. Run npm run dev in template/.
2. Navigate to HealthBar's theme switcher.
3. Inspect with Accessibility tab in Chrome DevTools — the radiogroup role should be present on the wrapper, radio on each item.

Fix options

• (preferred) Wrap the ToggleGroup in role="radiogroup" + aria-label="Theme", then map each ToggleGroupItem to render with role="radio" aria-checked={...} when its parent is type="single". This requires a small extension of the shared/ui/toggle-group/ primitive (see RFC-016).
• (workaround) Replace ToggleGroup here with three explicit Toggle primitives wired together as a manual radiogroup. Loses the bits-ui keyboard-navigation freebies.

Acceptance

• DevTools Accessibility tree shows radiogroup on the wrapper and radio on each item.
• Keyboard: arrow keys move selection, Tab exits the group (roving tabindex preserved).
• VoiceOver / NVDA announce "radio button" for each option.

Audit traceability

• Reviewer: Logic & Correctness, score 7/10
• File: template/src/widgets/health-bar/ui/HealthBar.svelte

[fedorovvvv]

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

What changed (template/src/widgets/health-bar/ui/HealthBar.svelte)

• Wrapped <ToggleGroup type="single"> in an explicit <div role="radiogroup" aria-label="Theme">.
• Each ToggleGroupItem now forwards role="radio" and aria-checked={mode === id} (the ToggleGroupItem primitive grew an aria-checked + role prop pass-through to support this).
• Lifted props to interface Props { … } and dropped the legacy $props<{}>() form (closes [type-safety] HealthBar: drop as ThemeMode cast; type permission as NotificationPermission #93 partially).
• permission now typed NotificationPermission | 'unsupported' matching the actual notificationPermission() return type.
• Removed as ThemeMode cast — replaced with an isThemeMode type guard that no-ops on stray callbacks.

Browser-verified accessibility tree

radiogroup, aria-label="Theme"
  ├─ role=radio, aria-checked=false, "Auto"
  ├─ role=radio, aria-checked=true,  "Light"
  └─ role=radio, aria-checked=false, "Dark"

✅ DevTools accessibility tree shows radiogroup on wrapper, radio on each item with explicit aria-checked.

Acceptance

• DevTools Accessibility tree shows radiogroup on the wrapper.
• Each item has role="radio" with explicit aria-checked.
• npm run check clean.
• VoiceOver/NVDA verification — pending manual a11y pass.

Tracking PR: pending (will batch with rest of #99 follow-ups).

[fedorovvvv]

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