angular / angular/components

bug(mat-stepper): on iOS device (iphone 15, iOS 18.5), any label or input field in stepper panel gets announced with 'tab' suffix

Aperta
#31,559 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Accessibility area: cdk/stepper area: material/stepper ios P3 safari
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

unknown

### Description

Hi Team,
We are observing one accessibility issue for mat-stepper on iOS device. The mat-stepper when used on android device or an windows then announces labels correctly. But when it is opened on iOS device, then screen reader read every field in tab panel with suffix 'tab'. Like in provided example for tabpanel in first step, screen reader reads like 'first step, last step tab' then 'next tab'. It doesn't announce 'next button' instead it announce all the elements in tabpanel with suffix tab.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/2webe4ha?file=package.json
Steps to reproduce:
1. Open mat-stepper example on iOS device
2. listen to screen reader announcing the page contents
3. for first step it should announce next button as 'button next' but it announces as 'next tab'

### Expected Behavior

Fields should be properly announced when they are inside mat-stepper panel like for button it should read as 'next button' .

### Actual Behavior

Fields inside mat-stepper panel are getting announced with 'tab' suffix like for next button, it is reading as 'next tab'.

### Environment

- Angular: v20.1.0
- CDK/Material: v20.1.0
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu): iOS device

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla riproduzione StackBlitz collegata ed esamina l'esempio mat-stepper usando Angular/CDK Material v20.1.0 su un dispositivo iOS con lo screen reader attivato. Confronta gli annunci delle etichette, dei campi di input e del pulsante Next del pannello dello stepper con il comportamento su Android o Windows. Il lavoro è completato quando i controlli del pannello vengono annunciati con i ruoli corretti, invece che con il suffisso “tab”.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
accessibility, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.