ionic-team / ionic-team/ionic-framework

bug: (ion-segment): screen readers fail to announce correct tab count/position due to ARIA tablist hierarchy

オープン
#31,282 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
package: core type: bug
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

`ion-segment` elements do not correctly announce tab counts or position (e.g., announcing "1 of 1" or just "tab" instead of "1 of n") when using screen readers such as VoiceOver (iOS/macOS) and TalkBack (Android).

Per the [W3C ARIA Authoring Practices Guide (APG) Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), elements with `role="tab"` must be directly contained by or owned by an element with `role="tablist"`.

In the current Shadow DOM / DOM hierarchy of `ion-segment`, intermediate elements sit between the `role="tablist"` container (`ion-segment`) and the individual `role="tab"` buttons (`ion-segment-button`). Because of this broken parent-child ARIA relationship, assistive technologies fail to calculate the set size and position in set automatically.

### Expected Behavior

The screen reader should announce the current tab's position relative to the total number of tabs in the segment list (e.g., *"Tab 1 of 4"*, *"Tab 2 of 4"*).

### Steps to Reproduce

1. Enable VoiceOver (macOS/iOS) or TalkBack (Android).
2. Navigate to the official Ionic documentation page: https://ionicframework.com/docs/api/segment
3. Focus on any `ion-segment` example containing multiple `ion-segment-button` elements.
4. Listen to the screen reader output when navigating between tabs.

### Code Reproduction URL

https://github.com/marlon-ionic/issue-a11y-announce-segment

### Ionic Info

Ionic:

```
Ionic CLI : 7.2.1 (/Users/user.name/.local/share/fnm/node-versions/v24.11.1/installation/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.8.14
@angular-devkit/build-angular : 20.3.28
@angular-devkit/schematics : 20.3.32
@angular/cli : 20.3.28
@ionic/angular-toolkit : 12.3.0
```

Capacitor:

```
Capacitor CLI : 8.4.2
@capacitor/android : 8.4.2
@capacitor/core : 8.4.2
@capacitor/ios : 8.4.2
```

Utility:

```
cordova-res : not installed globally
native-run : 2.0.3
```

System:

```
NodeJS : v24.11.1 (/Users/user.name/.local/share/fnm/node-versions/v24.11.1/installation/bin/node)
npm : 11.16.0
OS : macOS Unknown
```

### Additional Information

### Suggested Fix

* **Option A:** Adjust the internal rendering structure so `role="tab"` elements are direct children of the `role="tablist"` container.
* **Option B:** Utilize `aria-owns` on the `role="tablist"` element pointing to the IDs of the `role="tab"` elements, or explicitly provide `aria-setsize` and `aria-posinset` attributes on each `ion-segment-button`.

### Related Resources

* [W3C ARIA Tab Pattern Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
* [Rocket Validator: Element with role="tab" must be contained in or owned by role="tablist"](https://rocketvalidator.com/html-validation/an-element-with-role-tab-must-be-contained-in-or-owned-by-an-element-with-role-tablist)

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

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

調査の方向性

Start with the ion-segment and ion-segment-button implementation and compare their rendered hierarchy with the W3C ARIA Tabs Pattern. Reproduce the issue using the linked accessibility demo or the ion-segment documentation examples with VoiceOver or TalkBack. Done means each segment button is correctly contained or owned by the tablist and screen readers announce its position and total count, such as “Tab 1 of 4”.

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

評価

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

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

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