Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

bug(Tabs): Accessibility issues with Tab Pagination

未关闭
  • 哪里不对？
#32,856 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

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

调研方向

从 Material tabs overview page 开始，将窗口调整为700px或更小，以检查标签分页箭头。检查分页元素如何向键盘、屏幕阅读器和语音导航用户公开，然后验证所得的语义和标签是否符合 issue 中预期的行为。

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

描述

Accessibility area: material/tabs P4
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 information below is from a report from Evinced with 2 findings (Interactable Role and Accessible Name) on the Tab Pagination elements:

Interactable Role

Interactive elements, such as buttons, links, and inputs, must convey that they can be interacted with by using the proper semantics.

Severity: Critical
Cause: Screen readers are unable to identify that the element is interactive due to missing or incorrect semantics.
Effect: Screen reader users may not find the content or may not realize that the the content is interactive.
Read more in Evinced Knowledge Base
How To Fix:
Use native HTML interactive elements such as <button>, <a>, <select>, <input>. Alternatively, add the appropriate ARIA role that corresponds to the content purpose.

WCAG Violations: 4.1.2 Name, Role, Value (Level A)
Section 508: 1194.21(d)
EN 301 549: 9.4.1.2 Name, Role, Value

Accessible Name

Elements that can be interacted with, such as buttons, links, and input fields, must have an accessible name. The name should indicate which information or action is required, and/or what will happen if they interact with it.

Severity: Critical
Cause: The element does not have an accessible name to inform the screen reader of its purpose and function.
Effect: Assistive technologies use the accessible name to label, announce and trigger the element's action. If there's no valid accessible name, assistive technologies won't be able to understand the element correctly.
Read more in Evinced Knowledge Base
How To Fix:
Depending on the type of element, either add a descriptive text to the body of the tag or add the appropriate attributes to the tag.

WCAG Violations: 4.1.2 Name, Role, Value (Level A)

Reproduction

This issue is visible on the Material documentation page:
https://material.angular.dev/components/tabs/overview

Resize your window to 700px or less for the Tab Pagination 'chevron' elements to appear. Inspect these elements to observe their (lack of) accessible attributes.

Expected Behavior

These elements should be hidden from keyboard and screen readers.
These elements should be labeled for voice navigation.

The potential fix could include applying the following attributes to each arrow

role=button aria-hidden=”true” tabindex=-1

aria-label with 'Scroll Tabs Right' or 'Scroll Tabs Left'

Actual Behavior

Each tab pagination 'button' is composed of 2 div elements:

<div mat-ripple="" class="mat-ripple mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after">
    <div class="mat-mdc-tab-header-pagination-chevron"></div>
</div>

This is an interactive element that isn't adequately labeled / accessible for voice navigation users.

Environment
  • Angular: 20
  • CDK/Material: 20
  • Browser(s): Chrome, any
  • Operating System (e.g. Windows, macOS, Ubuntu): any
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
2 天 19 小时
30 天内合并 PR
82

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

查看 angular/components 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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