bug: a11y, talkback reads tab button twice when swiping to go to next/previous tab button

[VittorioEuris]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
When going over a tab-button with screen-reader it will be red but if I tick left with one finger it keeps on the same item, reading again the label and identifing it as tab. Inspecting the item it's caused by an anchor element inside the component.
This happens only on Android Talkback.

Expected behavior:
As on iOS the screen reader should ignore the anchor inside the component.

Steps to reproduce:

• Create a new app with tabs
• With screen reader enabled, on Android, tap on a tab button
• Swipe left with one finger

Related code:
https://github.com/VittorioEuris/ionic-a11y-issues.git

Ionic info:

Ionic:

   Ionic CLI                     : 6.16.1
   Ionic Framework               : @ionic/angular 5.6.7
   @angular-devkit/build-angular : 0.1102.13
   @angular-devkit/schematics    : 11.2.13
   @angular/cli                  : 11.2.13
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI      : 3.0.0
   @capacitor/android : 3.0.0
   @capacitor/core    : 3.0.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.3.0

System:

   NodeJS : v14.17.0 (~/.nvm/versions/node/v14.17.0/bin/node)
   npm    : 6.14.13
   OS     : Linux 5.11

[VittorioEuris]

Same problem with the ion-segment-button:
Role tab with correct label and nested button with the same label that could not be hidden from the aria tree.
I've updated the repository with the ion-segment section on tab1 page.

[Abrissirba]

We have the same problem with tabs being read/focues twiced when swiping left or irght through the page with talkback. I quickly tested with settings aria-hidden on the a tags inside the ion-tab-button and then the tab only got read/focused once. However, I'm not sure what other consequences that might occour by setting aria hidden on the link

[vitor-antonio]

We encountered the same issue using ion-checkbox, when using TalkBack and linear navigation it reads the checkbox twice. The checkbox and its label are getting separate focus, so it reads it two times instead of reading it as a whole.

[rafadbv]

Same problem here using ion-checkbox, ion-toggle and ion-segment

[Hari0507]

Same issue here. Any solution ?

[liamdebeasi]

Thanks for the issue. This has been resolved via #26576, and a fix will be available in an upcoming release of Ionic Framework.

The same fix for segment will be resolved in #26575.

The same issue for ion-checkbox and ion-toggle has been resolved. However, the fix for those components requires an architecture rework, so these fixes will be available in Ionic 7.0. We will have a beta period in the future where developers can test these changes and provide feedback. Let me know if there are any questions.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.