Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#54,653 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@argszero đang làm issue này rồi.

Từ ngày 12/10/2026.

  • #54977 của @argszero — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
74/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Đọc packages/ui/src/components/animated-number.tsx và CSS của nó, sau đó tái hiện cây trợ năng trong Chromium với một giá trị cố định và trong lúc cập nhật. Kiểm tra cách thành phần cung cấp giá trị số ổn định và các ô hoạt ảnh trực quan cho công nghệ hỗ trợ. Hoàn thành khi cây trợ năng hiển thị một số hiện tại duy nhất theo đúng thứ tự trong suốt quá trình hoạt ảnh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
213k
Fork
28.4k
Merge trung bình
8 giờ 51 phút
Pull request đã merge (30 ngày)
289

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của anomalyco/opencode

Tất cả issue của anomalyco/opencode

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.