[Accessibility - Android] <ion-input> is not acknowledged by Android Talkback

[bryplano]

I'm submitting a...

[x] bug report (ionic-angular 3.9.8)
[ ] feature request

Current behavior:

No highlighting or audible notice is provided by Android Talkback when selecting an <ion-input> field. Additionally, the field cannot be edited.

Expected behavior:

Any <ion-input> field should have the following behavior from an accessibility standpoint (to mimic a regular HTML input field):

1. Highlighted (green box)
2. Described in some manner by Android Talkback
3. The field should also be editable (the keyboard should be displayed and the user allowed to input text, just like a normal HTML input)

Steps to reproduce:

This was reproduced on a Google Pixel 2 (physical device) with Android 9.0

Prerequisite: Enable Talkback on the Android device: https://support.google.com/accessibility/android/answer/6007100?hl=en

1. Install the sample application from the Github repo and use ionic cordova run android to get the app on your connected Android device
2. Attempt to tap to the right of any of the three text labels with "Ion Input"
3. Notice that you cannot tap on any of the areas where you would normally be able to type into; you also don't receive any visual or audio feedback
4. Compare to the basic input fields at the bottom (under "HTML inputs")

Related code:

https://github.com/bryplano/AndroidTalkbackTest

Other information:

May be related to a very old v2 issue: #69

ionic info

   Ionic CLI          : 5.2.3 
   Ionic Framework    : ionic-angular 3.9.8
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.16.0 
   npm               : 6.10.1
   OS                : macOS Mojave

[nascarjake]

I am also unable to tap ion-inputs with an android 9 device.
My issue is identical to that described here:
apache/cordova-android#804

The guys over at cordova-android said it might not be them.
As described in that issue ticket, if i tap on a button or an image or anything besides an input, I can then click on the input and the keyboard opens. Doing this while inspecting the page I do see the ion-item and the ion-input flash purple as if their class tag changed, however upon very careful inspection nothing is really changing in any of these elements.

Inspecting the input box shows that the "first tapped element" according to z-index is the input-cover which has all the css pointer events and touch events you'd expect. After tapping on another element first, tapping on this input-cover focuses the ion-input as expected.

Its very strange and only happens on android 9.
Android 8 and ios devices have no issues at all.

[StefanRein]

Hey,

I checked here: apache/cordova-android#804

That it works by commenting exactly out this line of code:
https://github.com/ionic-team/ionic-v3/blob/master/src/components/input/input.ts#L614

I will open a pull request.

[StefanRein]

My temporary fix is right now: Create a directive and override the current method:

import { Directive, Self } from '@angular/core';
import { TextInput } from 'ionic-angular';
import { hasPointerMoved, pointerCoord } from 'ionic-angular/util/dom';

@Directive({ selector: 'ion-input,ion-textarea' })
export class TextInputDirective {
    constructor(@Self() textInput: TextInput) {
        textInput._pointerEnd = TextInputDirective.__pointerEnd.bind(textInput);
    }

    private static __pointerEnd = function(this: TextInput, ev: UIEvent) {
        if ((this._isTouch && ev.type === 'mouseup') || !(this as any)._app.isEnabled()) {
            // the app is actively doing something right now
            // don't try to scroll in the input
            ev.preventDefault();
            ev.stopPropagation();
        } else if (this._coord) {
            // get where the touchend/mouseup ended
            const endCoord = pointerCoord(ev);

            // focus this input if the pointer hasn't moved XX pixels
            // and the input doesn't already have focus
            if (!hasPointerMoved(8, this._coord, endCoord) && !this.isFocus()) {
                // ev.preventDefault(); @see https://github.com/ionic-team/ionic-v3/issues/1049
                ev.stopPropagation();

                // begin the input focus process
                this._jsSetFocus();
            }
        }

        this._coord = null;
    };
}

[StevenH86]

Have this issue also.... As my app always opens to a login screen or a dashboard with no inputs, my temp fix is to simply apply display: none to .input-cover for my login screen. Doesn't seem to have negative impacts, so I am going to roll with that until it's fixed properly.

[liamdebeasi]

As a workaround, you should be able to set role="textbox" on the ion-input.

[StevenH86]

As a workaround, you should be able to set role="textbox" on the ion-input.

This didn't work for me.

[liamdebeasi]

@StevenH86 What device/Android version are you testing this on?

[StefanRein]

@liamdebeasi Removing my workaround and changing it with your suggestion does not work.

Install Android Studio with a virtual device, e.g. Pixel XL API 28.
The targeting API needs to be 28. I had this issue with the Android 9 from Samsung and Android One.
How did you test this? Which Device? OS? API?
On the Huawei with API 27 it is working with and without this fix.

[StevenH86]

@StevenH86 What device/Android version are you testing this on?

@liamdebeasi

Cordova Android 8.0.0
API 28

Devices tested on: Samsung s9, Pixel 3, Samsung s5, xiaomi mi9.... Also emulators with android 4.4 to 9.

Only solution that worked was the one I mentioned above.

[StefanRein]

@StevenH86 Mine did not work? Did you try? To remove the preventDefault()?