Screen reader reads composer hero as: What should we build in Change project menu button collapsed subMenu ?
Nobody has claimed this yet.
- 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:
- The project switcher is a
MenuTriggerembedded inline inside the<h1>inapps/web/src/components/chat/DraftHeroHeadline.tsx. Itsaria-label="Change project"overrides the visible text, so the actual project name never reaches the sentence. The heading literally reads "...build in Change project...". - 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-shapedaria-labelso 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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