Accessibility: keyboard & screen-reader gaps across the letter-generator flow

[lenoraporter]

Describe the bug

Several steps in the letter generator flow can't be used with a keyboard or screen reader:

• The platform picker cards and the cards on the Initial content questions page.
• The page has no <h1>, and headings skip levels (e.g. h2 → h4), so screen-reader heading/landmark navigation is broken.
• The voice-input mic buttons are icon-only with no accessible name and no pressed state.
• Async states ("Analysing your responses", "Creating your letter", and the error states) aren't announced to screen readers.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://tools.chayn.co/letter-generator and start the flow.
2. On the "Select the platform" step, use Tab + arrow keys / Space to try to choose a platform.
3. Continue to "Initial content questions" and try to choose a content type the same way.
4. Optionally, run a heading-outline tool (e.g. HeadingsMap) on any step, or navigate with a screen reader.
5. Result: the option cards can't be selected by keyboard; there's no <h1>; the outline skips heading levels; mic buttons announce only as "button"; loading/error messages aren't announced.

Expected behavior

• Option cards are focusable and selectable by keyboard (arrow keys + Space) and announced as radios in a named group.
• Each step has a single <h1> and a sequential, non-skipping heading outline.
• Mic buttons have an accessible name and a pressed/recording state.
• Loading and error states are announced (role="status" / role="alert").

Screenshots

Video

The user isn't able to select a platform using accessibility tools or keyboard which means they can't submit a request.

Screen.Recording.2026-06-19.at.11.20.25.PM.mov

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 149.0.7827.115

Smartphone (please complete the following information):

N/A — keyboard/screen-reader issue, reproduced on desktop.

Additional context

Verified with keyboard navigation, the browser accessibility tree, and HeadingsMap.

Proposed fix:

• convert the option cards to Radix radio groups
• give each step a single <h1> with a non-skipping outline
• label the mic buttons (aria-label + aria-pressed)
• announce async states via role="status"/role="alert"

I'd like to be assigned this. The work is ready.

[lenoraporter]

Would you all like this PR to be broken into smaller chunks?