Accessibility - ion-toggle

Ionic Framework Ionic Angular
1

Hi,

  <ion-item>
    <ion-label>Checked Toggle</ion-label>
    <ion-toggle slot="end" [checked]="true"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Unchecked Toggle</ion-label>
    <ion-toggle slot="end" [checked]="false"></ion-toggle>
  </ion-item>

in the above code, the Talkback reads Checked Toggle twice.

Steps to re-produce:

  1. Open the app
  2. Turn on TalkBack
  3. Swipe to navigate to the ion-toggle
  4. Talkback reads Checked Toggle
  5. Swipe again the talkback highlight the same ion-toggle again.
  6. Talkback reads Checked Toggle
  7. Swipe again
  8. Talkback highlights the second ion-toggle and reads Unchecked Toggle.

Video Reference: Ionic Talkback issue with ion-toggle - YouTube

Thanks.

2

Issue resolved. Debugged the app and found the solution.