angular / angular/components

bug(Tabs): Accessibility issues with Tab Pagination

Offen
#32,856 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: material/tabs P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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](https://knowledge.evinced.com/system-validations/interactable-role)
**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)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
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](https://knowledge.evinced.com/system-validations/accessible-name)
**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)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)

### 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:

```




```
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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Öffne zunächst die Material tabs overview page und verkleinere das Fenster auf 700px oder weniger, um die Chevrons der Tab-Paginierung zu überprüfen. Untersuche, wie die Paginierungselemente für Nutzer von Tastatur, Screenreadern und Sprachsteuerung zugänglich gemacht werden, und überprüfe anschließend, ob die resultierenden Semantiken und Beschriftungen dem im Issue erwarteten Verhalten entsprechen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.