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

[marlon-ionic]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing 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, 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
• Rocket Validator: Element with role="tab" must be contained in or owned by role="tablist"