pingdotgg / pingdotgg/t3code

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

Open Beginner friendly
#12,396 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accepted bug via-triage
Dominant language
TypeScript
Stars
23k
Forks
5.9k
Avg merge
11h 14m
Merged PRs (30d)
357

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with apps/web/src/components/chat/DraftHeroHeadline.tsx and then inspect NewTaskDraftScreen.tsx for the mobile picker labels. Verify the heading exposes a sentence containing the project name while the picker remains identified as an interactive menu button when focused; confirm the resulting announcements with a screen reader.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
88/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.