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

オープン
#31,559 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
Accessibility area: cdk/stepper area: material/stepper ios P3 safari
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされている StackBlitz の再現手順から始め、スクリーンリーダーを有効にした iOS デバイス上で Angular/CDK Material v20.1.0 を使用する mat-stepper の例を調査します。stepper パネルのラベル、入力、Next ボタンの読み上げを、Android または Windows での動作と比較します。パネルのコントロールが「tab」サフィックス付きではなく、正しいロールとして読み上げられれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。