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

ChainOfThought: the header's aria-controls points at an element that is never rendered

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

Los mantenedores suelen responder en 1 día

@HardMax71 ya está trabajando en esto.

Desde el 2/10/2026.

  • #506 de @HardMax71 — abierto

Evaluación

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

Línea de trabajo

Comienza en packages/elements/src/chain-of-thought.tsx, en las ubicaciones de ChainOfThoughtHeader y ChainOfThoughtContent alrededor de las líneas 80 y 185. Compara su uso de Collapsible con Reasoning, que utiliza un único Root para el trigger y el content, y después reproduce la secuencia de renderizado y clic proporcionada. Se considera terminado cuando el aria-controls del botón coincide con el id del elemento Steps renderizado y resuelve a un elemento existente.

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

Descripción

ChainOfThoughtHeader wraps its trigger in its own <Collapsible> (chain-of-thought.tsx#L80) and ChainOfThoughtContent wraps the content in a second one (#L185). Radix generates a content id per root, so the trigger's aria-controls names the content of the header's root, which never renders, and the content that does render has an id nothing refers to. Assistive tech loses the link between the button and the steps it expands.

Repro (registry main 6a9d5b1, Chrome):

render(
  <ChainOfThought>
    <ChainOfThoughtHeader />
    <ChainOfThoughtContent>Steps</ChainOfThoughtContent>
  </ChainOfThought>
);
await userEvent.click(screen.getByRole("button"));

const controls = screen.getByRole("button").getAttribute("aria-controls");
controls === screen.getByText("Steps").id; // false
document.getElementById(controls); // null

Expected: aria-controls is the id of the rendered content, as in Reasoning, which uses one Collapsible root for its trigger and content.

Lenguaje dominante
TypeScript
Estrellas
2.5k
Forks
291
Merge medio
20 min
PR fusionados (30 d)
3

Preparar el entorno

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 vercel/ai-elements

Todos los issues de vercel/ai-elements

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.