Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Studio catalog prompt editor has no accessible name

Aperta Adatta ai principianti
  • Qualcosa non va?
#4,384 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@lorenzozanee ci sta già lavorando.

Dal 24/9/2026.

  • #4398 di @lorenzozanee — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
accessibility, frontend

Direzione di ricerca

Leggi packages/studio/AGENTS.md, quindi esamina l'area di testo in packages/studio/src/components/sidebar/PromptPreviewModal.tsx e il componente che la richiama in BlocksTab.tsx. Esegui i test mirati dei componenti di Studio oppure la suite con bun run --cwd packages/studio test e aggiungi la coverage per il nome accessibile dell'area di testo. Il lavoro è completo quando il nome rimane significativo dopo la modifica, mentre la copia e la scorciatoia esistente Ctrl/Cmd+Enter continuano a funzionare; verifica il risultato nell'albero dell'accessibilità di Chrome.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug difficulty/easy triage/ready

The catalog's Ask agent dialog contains a prompt editor with no accessible name. Chrome exposes the dialog title, but its textbox is unnamed, so assistive technology cannot identify the field independently of surrounding text.

Reproduction and evidence

Verified against origin/main 86fa10ced4297bfd9f4fe67b6767afae7a07fd3c on September 23, 2026. The relevant component is unchanged from the source used in the browser probe.

  1. Open Studio's catalog and use a block card's Ask agent action.
  2. Inspect the prompt textarea in Chrome's accessibility tree.
  3. The textbox's computed name is empty; the dialog itself is named Ask agent — <block title>.

An isolated browser mount of the actual PromptPreviewModal with title Example and prompt Change the title produced:

[
  { "role": "dialog", "name": "Ask agent — Example" },
  { "role": "textbox", "name": "", "value": "Change the title" }
]

This was verified through Chrome's accessibility tree, not a screen-reader session or full Studio end-to-end run. The catalog caller is source-verified.

Scope

Give this prompt editor a stable, meaningful accessible name using a label or appropriate ARIA association. Preserve the existing prompt text, dialog title, editing, copy action, and keyboard shortcut. No modal redesign is needed.

The separate selection AskAgentModal already receives a placeholder-derived accessible name in Chrome and is outside this issue's scope.

Acceptance criteria
  • The prompt textbox has a meaningful nonempty accessible name, including when the prompt is populated or edited.
  • The field name is distinct from the editor's current value and the dialog title.
  • Copying the edited prompt and the existing Ctrl/Cmd+Enter shortcut still work.
  • A focused component test checks the textbox's accessible name; a browser accessibility inspection confirms the result.
Code pointers and validation

Difficulty: easy — a localized labeling correction with direct accessibility verification. Before starting, check current assignments and linked PRs. Open UI migration PRs #3625, #3626, #3774 and #3776 contain only CSS-class changes in this component; their inspected patches do not add its field label.

Reviewer/mentor is being arranged. Comment with your intended approach before starting so ownership can be coordinated; this issue is not yet a newcomer invitation.

Lingua principale
TypeScript
Stelle
54.1k
Fork
4.9k
Merge medio
7h 29m
PR unite (30g)
778

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di heygen-com/hyperframes

Tutte le issue di heygen-com/hyperframes

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.