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

Ouverte
#31,559 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Accessibility area: cdk/stepper area: material/stepper ios P3 safari
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et examinez l’exemple mat-stepper utilisant Angular/CDK Material v20.1.0 sur un appareil iOS avec le lecteur d’écran activé. Comparez les annonces des libellés, des champs de saisie et du bouton Next du panneau du stepper avec le comportement sous Android ou Windows. La tâche est terminée lorsque les contrôles du panneau sont annoncés avec leurs rôles corrects, et non avec le suffixe « tab ».

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.