bug(cdkTable & virtual scroll): Virtual scrolling in CDK table provides incorrect information to screen readers and causes focus/context loss during navigation
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- angular, typescript
调研方向
从 CDK table virtual-scrolling 重现和链接的 CDK table overview 示例开始,在移除和渲染行时使用屏幕阅读器。调查错误的行总数,以及导航期间焦点或上下文的变化。当屏幕阅读器收到实际行数,并且在渲染范围更新时导航仍保持稳定,即表示完成。
由索引模型根据 Issue 内容生成。
描述
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:
- Start a screen reader (e.g. NVDA, JAWS, or VoiceOver).
- Navigate to the table and begin reading/navigating through rows using screen reader table navigation commands.
- 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)
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 1 小时
- 30 天内合并 PR
- 84
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
angular/components 的其他 Issue
-
area: material/tree docs gemini-triaged needs triage
难度 2/5 1-3 小时 新手友好度 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33763 · 2 条评论 · 3 个 reaction ·
-
area: material/table gemini-triaged P4
难度 1/5 1 小时以内 新手友好度 88/100
angular/components#33709 · 1 条评论 ·
-
area: material/table docs gemini-triaged P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
难度 1/5 1 小时以内 新手友好度 78/100
angular/components#33059 · 2 条评论 ·
查看 angular/components 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 74/100
-
security
难度 2/5 1-3 小时 新手友好度 72/100
IBM/node-sdk-core#373 ·
-
e2e-failure ready-to-code
难度 2/5 1-3 小时 新手友好度 86/100
-
bug
难度 2/5 1-3 小时 新手友好度 74/100
-
chore
难度 2/5 1-3 小时 新手友好度 88/100