Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

bug(Tabs): Accessibility issues with Tab Pagination

Aberta
  • Algo errado?
#32,856 2 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
48/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
angular, typescript
Domínio
accessibility, frontend

Direção de pesquisa

Comece na Material tabs overview page e redimensione a janela para 700px ou menos para inspecionar os chevrons de paginação das abas. Revise como os elementos de paginação são expostos aos usuários de teclado, leitores de tela e navegação por voz e, em seguida, verifique se a semântica e os rótulos resultantes correspondem ao comportamento esperado no issue.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
TypeScript
Estrelas
25k
Forks
6.8k
Merge médio
1d 7h
PRs com merge (30d)
69

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/components

Todas as issues de angular/components

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.