ionic-team / ionic-team/ionic-framework

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

Abierto
#31,282 1 comentario 0 reacciones 0 asignados Ver en GitHub
package: core type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

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

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
64/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.