bug: swiper, voiceover reads wrong slides content

[NeckbreakerPascal]

Ionic version: [ ] 4.x [x] 5.x

I'm submitting a ... [x] bug report [ ] feature request

Current behavior:

• I use ion-slides nested combined with the ion-segment to change the current slider (slideTo-Function)
• VoiceOver on iOS is activated
• 3 Sliders (Slide 1, Slide 2, Slide 3)
• Start on Slide 1 and go to Slide 2
• use the "Swipe right" gesture for the iOS ScreenReader
• He reads the ion-segment elements correct
• After that he reads the content from Slide 1

Expected behavior:

• When I am on the Slide 2, the VoiceOver Swipe Right Gesture should Read the current active content, not the one from Slide 1

Steps to reproduce:

• Create a Slider with 3 Slides
• Ion Segment Button with kind of a select Slide function
• put content to every slide (different content)
• Build and run on iOS Device
• Start VoiceOver
• Swipe Right gesture (Voice Over reads the DOM Elements one after another)

Related code: Tried my best to make a stackblitz, but there is some kind of an error because of the Viewchild and the imports. For sure you can see the overall structure of the slides and how they work.

https://stackblitz.com/edit/ionic-v4-angular-tabs-lppmj3?file=src/app/tab1/tab1.page.ts

Other information:

• i also checked the swiper io docs but did not find any more infos on this issue

Ionic info:

Ionic:

   Ionic CLI                     : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.1
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 30 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.15.4 (/usr/local/bin/node)
   npm        : 2.15.12
   OS         : macOS Big Sur
   Xcode      : Xcode 12.4 Build version 12D4e

[liamdebeasi]

Thanks for the issue. It looks like you are installing ionic-angular, which is Ionic Framework v3. I see you are also using the latest version of Ionic Framework (@ionic/angular) in other places. Can you give this a try again without using ionic-angular?

[NeckbreakerPascal]

Thanks for the issue. It looks like you are installing ionic-angular, which is Ionic Framework v3. I see you are also using the latest version of Ionic Framework (@ionic/angular) in other places. Can you give this a try again without using ionic-angular?

Hey there, thanks for the answer. You mean in the Stackblitz? I only see '@ionic/angular' same for that in the real app, I just checked it.

import {IonContent, IonSlides} from '@ionic/angular';

[liamdebeasi]

Yeah in the StackBlitz you have the following in app.module.ts:

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

...

IonicModule.forRoot(MyApp)

This is going to initialize an Ionic v3 application. Ionic v3 had ion-slides, just a much older version of it.

[NeckbreakerPascal]

Hey there, ok got it.

I used a wrong template on stackblitz. I updated the whole thing which was much easier for now, checkout the new one here: https://stackblitz.com/edit/ionic-v4-angular-tabs-lppmj3?file=src/app/tab1/tab1.page.ts

[liamdebeasi]

Thanks! I was able to reproduce the issue. This looks like an issue in Swiper, the technology that ion-slides depends on. We have some updates coming soon regarding ion-slides so I will look to see if the issue is fixed there.

[liamdebeasi]

Thanks for the issue! With the release of Ionic 6, we made the decision to deprecate ion-slides in favor of using Swiper.js directly.

Moving forward, ion-slides will only receive critical security fixes, and the component will be removed in Ionic 7. As a result, I am going to close this issue.

We have prepared migration guides for each of the 3 JavaScript frameworks we support, so developers can get started migrating right away.

Migration for Angular Migration for React Migration for Vue

We believe this change will lead to a healthier Ionic ecosystem as it frees up resources for the Ionic team to dedicate to other areas of this project while still giving developers options for carousels in their apps. Since ion-slides currently uses Swiper under the hood, the behavior of your carousels should remain the same even after you migrate.

For more information on the reasoning for and benefits of this change, please see the ion-slides documentation.

Thank you!

[ionitron-bot[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.