Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Studio catalog prompt editor has no accessible name

Abierto Apto para principiantes
  • ¿Algo no está bien?
#4,384 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@lorenzozanee ya está trabajando en esto.

Desde el 24/9/2026.

  • #4398 de @lorenzozanee — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
accessibility, frontend

Línea de trabajo

Lee packages/studio/AGENTS.md y, después, inspecciona el área de texto en packages/studio/src/components/sidebar/PromptPreviewModal.tsx y el componente que la invoca en BlocksTab.tsx. Ejecuta las pruebas de componentes de Studio específicas o la suite con bun run --cwd packages/studio test y añade cobertura para el nombre accesible del cuadro de texto. Se considera terminado cuando el nombre siga siendo significativo después de editar, mientras copiar y el atajo existente Ctrl/Cmd+Enter sigan funcionando; verifica el resultado en el árbol de accesibilidad de Chrome.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
54.1k
Forks
4.9k
Merge medio
7 h 29 min
PR fusionados (30 d)
778

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de heygen-com/hyperframes

Todos los issues de heygen-com/hyperframes

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.