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

bug(ui): V2 AnimatedNumber exposes animation digits and reversed reading order to screen readers

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

Los mantenedores suelen responder en 1 día

@argszero ya está trabajando en esto.

Desde el 12/10/2026.

  • #54977 de @argszero — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
74/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/ui/src/components/animated-number.tsx y su CSS, y luego reproduce el árbol de accesibilidad en Chromium para un valor fijo y durante una actualización. Comprueba cómo expone el componente su valor numérico estable y las celdas de animación visual a las tecnologías de asistencia. La tarea está terminada cuando el árbol de accesibilidad expone un único número actual en el orden correcto durante toda la animación.

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

Descripción

reproduced
Description

V2's AnimatedNumber still exposes animation cells to assistive technology and gives multi-digit numbers the wrong reading order.

With the unmodified production component and CSS rendered in Chromium / Solid 1.9.15:

  • Value 12 looks correct in LTR, but the accessibility snapshot contains text 2, then 1.
  • During a 5 to 6 update, the accessibility snapshot exposes 0123456789 three times instead of the actual count. The existing motion-duration CSS variable was increased only to capture this transient state.

The component reverses digits in DOM order and renders 30 cells per animated strip, without aria-hidden on the visual digits. The parent span's aria-label does not replace those children in the observed accessibility tree: production component.

CSS hides the strip at rest, but exposes it while animating; visual row-reverse does not repair accessibility reading order: production CSS. A current consumer is ToolCountLabel.

OpenCode version

2.0.26 source build, latest v2 commit 4617210822bdbb31e5749751afbfb4584ccedac8 (audited 2026-10-12). Both component and CSS are unchanged at current dev commit 707de5832656e89cc0f04436aa1cd5f4f91c5763.

Steps to reproduce

Render <AnimatedNumber value={12} /> with its production CSS, inspect its accessibility tree, then increment a single-digit value during animation.

Expected: one correctly ordered, current numeric value. Expose stable text for that value and hide the visual animation from assistive technology regardless of motion state.

Related reports

V2 continuation of Problem 2 in #41408, closed during V1 migration triage. #43643 concerns visual RTL ordering in the same component. Streaming-content exposure is tracked separately in #54652 and addressed by PR #51084, which does not fix this component.

Lenguaje dominante
TypeScript
Estrellas
213k
Forks
28.4k
Merge medio
8 h 51 min
PR fusionados (30 d)
289

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 anomalyco/opencode

Todos los issues de anomalyco/opencode

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.