#12396·t3code

Screen reader reads composer hero as: What should we build in Change project menu button collapsed subMenu ?

Author: Leos-KhaiCreated Sep 18, 2026Updated Sep 18, 2026
Labelsbugacceptedvia-triage

Problem

When a screen reader user navigates to the empty-composer headline, they hear:

What should we build in Change project menu button collapsed subMenu ? heading level 1

Two things garble this:

  1. The project switcher is a MenuTrigger embedded inline inside the <h1> in apps/web/src/components/chat/DraftHeroHeadline.tsx. Its aria-label="Change project" overrides the visible text, so the actual project name never reaches the sentence. The heading literally reads "...build in Change project...".
  2. Because the trigger is a menu button inside the heading, its role and state ("menu button", "collapsed", "subMenu") get announced mid-sentence, then the heading role trails at the end.

The mobile hero (NewTaskDraftScreen.tsx) has a milder version of the same issue: the picker's accessibilityLabel is Change project from {title}, which mixes an action phrase into the sentence where the project title should read.

Expected

The heading should read as a sentence that includes the project name, e.g. "What should we build in My Project? heading level 1". The picker control should still announce itself as an interactive menu button when focused.

Suggested fix

  • Let the trigger's accessible name come from its visible text (the project title) instead of the generic action label.
  • Give the <h1> an explicit sentence-shaped aria-label so heading navigation reads a clean phrase.
  • On mobile, use the project title as the picker's label (the existing "Opens the project picker" hint already explains the action).

Happy to open a PR for this.