ionic-team / ionic-team/ionic-framework

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

Aperta
#31,282 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
package: core type: bug
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

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”.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.