bug: WCAG Pointer Cancellation (2.5.2) is no accomplished on iOS

[crazyserver]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

Pointer cancellation criterion is not accomplished on Ionic main components, while a click is released out of the button target space the click action is triggered.

Screen recording (aspect ratio lost during video conversion)

Expected behavior:

The click action should be cancelled and not triggered giving the user the possibility to cancel the tap.

Steps to reproduce:

1. Create a new "tabs" app and run it.
2. Tab onto a tab but release the finger out of the tab bar.
3. Error behaviour: the tab changed.
4. Successful behaviour: the click is not triggered and the tab is not selected.

Related code:

ionic start myApp tabs --cordova
cd myApp
ionic cordova platform add ios
ionic cordova build ios

Other information:

• WCAG 2.5.2 Pointer Cancellation information

Ionic info:

Ionic:

   Ionic CLI                     : 6.14.1 (/Users/dpalou/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.9
   @angular-devkit/build-angular : 12.0.3
   @angular-devkit/schematics    : 12.0.3
   @angular/cli                  : 12.0.3
   @ionic/angular-toolkit        : 4.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.4.0) : 1.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/dpalou/Library/Android/sdk)
   ios-deploy        : 1.11.4
   ios-sim           : 8.0.2
   NodeJS            : v14.15.0 (/Users/dpalou/.nvm/versions/node/v14.15.0/bin/node)
   npm               : 6.14.8
   OS                : macOS Big Sur
   Xcode             : Xcode 12.5 Build version 12E262

[liamdebeasi]

Thanks for the issue. Does this only happen in Cordova or can you reproduce this in the browser/Capacitor too?

[liamdebeasi]

For additional context, I am testing this on iOS 14.5 in the browser and in WKWebView (the WebView that powers Ionic apps on Cordova and Capacitor) and I cannot reproduce this issue. What version of iOS are you testing this on?

[dpalou]

Hi Liam! I'm crazyserver's colleague. We haven't tried using Capacitor, we've only tried it in Cordova. It doesn't seem to happen in browser or Android, only in iOS.

The video attached was made using iOS simulator "iPad Pro (12.9 inch) (5th generation)" with iOS 14.5. We can also reproduce the issue in a real device, an iPad Air (8th generation) with iOS 14.5.1. I just tried it in an iPhone X simulator with iOS 14.5 and it's also happening to me.

We also use WKWebView, the starter project already includes the Ionic WebView plugin. We haven't modified anything from the project except the id in the config.xml.

cordova plugin list

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

cordova platform list

Installed platforms:
  ios 6.2.0

I noticed the starter project uses cordova-plugin-ionic-webview 4.2.1. In the project where we detected the issue we use v5. In any case, I just updated the WebView plugin to 5.0.0 and it still happens.

Do you want me to send the project to you? The only things I did are:

ionic start myApp tabs --cordova
cd myApp
(modify the id in config.xml)
ionic cordova platform add ios
ionic cordova build ios --prod

And now:

cordova plugin remove cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@5.0.0
ionic cordova build ios --prod

[liamdebeasi]

It might be a Cordova-specific issue - let me give it a shot there and I'll let you know if I can reproduce it or not.

[liamdebeasi]

It looks like this is a bug in cordova-plugin-ionic-webview. This issue does not reproduce for me in the browser or in Capacitor. In addition, I added a button with a click handler in a blank Cordova app and it does not reproduce there. Only when I added the webview plugin does the issue reproduce. I am going to move this to the appropriate repo. Thanks for filing this!

[crazyserver]

Thanks @liamdebeasi !