ionic-team / ionic-team/ionic-framework
bug: (ion-segment): screen readers fail to announce correct tab count/position due to ARIA tablist hierarchy
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 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