angular / angular/components

bug(cdkTable & virtual scroll): Virtual scrolling in CDK table provides incorrect information to screen readers and causes focus/context loss during navigation

Đang mở
#33,393 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
Accessibility area: cdk/table gemini-triaged P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

The recently introduced virtual scrolling support for CDK tables appears to have accessibility issues when used with screen readers.

Because rows are dynamically removed and added to the DOM, screen reader users can receive incorrect table information and lose their position while navigating through table content.

### Impact

This issue significantly affects accessibility for users who rely on screen readers and may make large virtualized tables difficult or impossible to navigate reliably.

### Reproduction

https://github.com/user-attachments/assets/e2afd2cd-d439-4be2-815b-47208ac93e5e

https://rc.material.angular.dev/cdk/table/overview#alternate-html-to-using-native-table
Steps to reproduce:
1. Start a screen reader (e.g. NVDA, JAWS, or VoiceOver).
2. Navigate to the table and begin reading/navigating through rows using screen reader table navigation commands.
3. Continue navigating down the table until virtual scrolling is triggered and previously rendered rows are removed from the DOM while new rows are rendered.

### Expected Behavior

Screen readers should be able to determine the actual total number of rows in the table, not only the rows currently rendered in the DOM.
Navigation through table rows should remain stable when virtual scrolling updates the rendered range.
Users should not unexpectedly jump to different data records while their screen reader focus remains on the same DOM row.
The virtual scrolling implementation should preserve a consistent and accessible experience for assistive technology users.

### Actual Behavior

Current Behavior

### Issue 1: Incorrect row count

Screen readers report an incorrect number of rows in the table.

Since only a subset of rows is rendered at any given time, assistive technologies may perceive only the currently rendered rows instead of the actual total number of rows in the dataset.

For example, a table containing thousands of rows may be announced as having only the number of rows currently present in the DOM.

### Issue 2: Row content changes while screen reader focus remains on the same row

When navigating the table with a screen reader, virtual scrolling can remove rows from the beginning of the DOM and append new rows at the end.

**Example:**

The user navigates down to row 30.
Virtual scrolling is triggered.
Rows 1–10 are removed from the DOM.
Rows 31–40 are added.
The screen reader remains positioned on what it considers "row 30".

However, the DOM element representing that row may now contain different content than before. As a result, the user effectively jumps to another record without receiving clear feedback that the underlying content has changed.

This makes navigation confusing and can cause users to lose context within the table.

### Environment

- Angular: 22
- CDK/Material: RC
- Browser(s): Chrome 149.0.7827.103
- Operating System (e.g. Windows, macOS, Ubuntu): macOS 26.5.1 (25F80)

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện CDK table virtual-scrolling và ví dụ CDK table overview được liên kết, sử dụng trình đọc màn hình trong khi các hàng được xóa và kết xuất. Điều tra tổng số hàng không chính xác và các thay đổi về tiêu điểm hoặc ngữ cảnh trong quá trình điều hướng. Được xem là hoàn tất khi trình đọc màn hình nhận được số hàng thực tế và việc điều hướng vẫn ổn định khi phạm vi được kết xuất được cập nhật.

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

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
accessibility, frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

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.