angular / angular/components

Demo bug: expandable row table example is not keyboard or screen reader accessible

未关闭
#15,020 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
Accessibility area: material/table docs help wanted P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### What is the expected behavior?
1. It must be possible to expand and collapse table rows in the example by using only a keyboard
2. Roles, states, and properties must be present so that users of screen reader software are aware that the rows can expand and collapse

#### What is the current behavior?
1. It is not possible to expand and collapse table rows in the example by using only a keyboard
2. Roles, states, and properties are not provided to convey the functionality to users of screen reader software

#### What are the steps to reproduce?
1. Using either of the following screen readers
- NVDA 2018.4.1 + Firefox 64
- VoiceOver for IOS (12.1.3) + Safari
2. Open the [table example page](https://material.angular.io/components/table/examples)
3. Use the screen reader to navigate to a table cell in the 'Table with expandable rows' example
4. Observe that the screen reader does not convey any semantics about the current expanded state, or that it is possible to interact with the row to expand the information
5. Press the 'enter' key or space bar and obverse that the row does not expand or collapse

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Angular Material Example 7.2.2 located at https://material.angular.io/components/
- NVDA 2018.4.1 + FireFox 64
- VoiceOver for IOS (12.1.3) + Safari (12.1.3)

#### Is there anything else we should know?

Since rows and cells already have roles, it would be best to add a separate control to expand/collapse each row.

贡献指南

打开贡献指南

调研方向

从 Material 表格示例页面开始,检查“Table with expandable rows”示例,包括当前如何激活某一行。使用键盘输入以及列出的 NVDA/Firefox 或 VoiceOver/Safari 组合验证结果;当行可以通过键盘展开和折叠,并且屏幕阅读器会播报相关的角色、状态和属性时,即可完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
accessibility, frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。