a11y: chat playground keyboard/thread not screen-reader friendly

[mollybeach]

Context

The chat playgrounds are visual simulators assembled from <button>s and <div>s (IosKeyboard.tsx, the three *Simulator.tsx components).

Problem

Accessibility gaps make the playground hard to use with assistive tech:

• Icon-only keyboard keys (shift / delete / globe in IosKeyboard.tsx) render an SVG with no aria-label.
• New thread messages are not announced — there is no aria-live region, so screen-reader users don't hear sends/settlements.
• The composer is a <div> showing the draft (not a real input), so it's invisible to assistive tech and the draft value isn't exposed.
• Focus is not managed when the Apple Pay / Telegram checkout sheet opens and closes.
• Animations (pp-anim-* in globals.css) don't respect prefers-reduced-motion.

Tasks

• Add aria-labels to icon-only keys; mark purely decorative SVGs aria-hidden.
• Add an aria-live="polite" region announcing new messages / payment outcomes.
• Give the composer an accessible name/role (or back it with a visually-hidden real <input>).
• Manage focus when the payment sheet opens/closes (trap, then restore).
• Gate the pp-anim-* animations behind a prefers-reduced-motion media query.

Acceptance criteria

• The playground is keyboard-navigable, a screen reader announces sends/settlements, and axe reports no critical violations on /messages.

Affected files

app/components/playground/IosKeyboard.tsx, app/components/IMessageSimulator.tsx, app/components/TelegramSimulator.tsx, app/components/DiscordSimulator.tsx, app/globals.css