feat(web): expose chat messages as headings

[yashranaway]

What Changed

• add a screen-reader-only h3 sender heading to every user and assistant message
• identify senders as “You” and “T3 Code”
• shift markdown heading levels in the accessibility tree so reply headings remain nested under their message
• add a transcript regression covering sender and nested markdown headings

Why

The chat transcript had no semantic boundary between messages, forcing screen reader users to navigate long conversations line by line. Sender headings make each message directly reachable through standard heading navigation while preserving the current visual design.

Closes #8535.

Testing

• vp test run apps/web/src/components/chat/MessagesTimeline.test.tsx (39 tests)
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/chat/MessagesTimeline.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp run --filter @t3tools/web typecheck

Checklist

• focused accessibility regression added
• lint passes for changed files
• web typecheck passes
• rebased onto latest upstream main
• no visual change; screenshots are not applicable

Model: GPT-5.6 Sol
Harness: Codex in T3 Code

---

Note

Low Risk
Accessibility-only markup (sr-only headings and aria-level); no visual or behavioral change for sighted users, with a focused regression test.

Overview
Improves chat transcript navigation for assistive technology by giving each user and assistant message a semantic heading without changing how messages look on screen.

Messages timeline: Every message row now includes a screen-reader-only h3 labeled "You" or "T3 Code", so heading navigation can jump between messages instead of walking line by line.

Markdown in messages: ChatMarkdown accepts an optional headingLevelOffset that sets aria-level on rendered h1–h6 (capped at 6) while leaving visual heading styles unchanged. User and assistant message bodies pass headingLevelOffset={3}, so a # in message text is announced as level 4—nested under the per-message level-3 sender heading.

A MessagesTimeline regression test asserts the sr-only sender headings and shifted aria-level on markdown headings in static markup.

^{Reviewed by Cursor Bugbot for commit 11b57d5. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Expose chat messages as headings for screen readers

• Adds a headingLevelOffset prop to ChatMarkdown that sets aria-level on rendered h1–h6 elements using shiftedHeadingLevel, capped at 6.
• MessagesTimeline now renders a visually hidden <h3> labeling each message author ('You' or 'T3 Code') and passes headingLevelOffset={3} to all ChatMarkdown render sites so markdown headings sit below the author heading in the accessibility tree.
• Adds a test asserting the hidden author headings and the offset aria-level on message headings.
• Risk: none — visual rendering is unchanged; only aria-level and a screen-reader-only heading are added.

^{Macroscope summarized 11b57d5.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 5bb67d78-b05e-4b80-8585-edd22a87e1db

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 11b57d5

Macroscope's review found this PR approvable — Adds narrowly scoped screen-reader headings and accessibility-level metadata to the existing chat transcript, with no visual, data, configuration, or deployment changes. The focused regression test covers the new heading structure.

^{You can add or adjust custom eligibility rules. Learn more.}