Ionic-framework: [Accessibility] ion-input tabindex cross-browser difference

[daleewald]

Bug Report

Current behavior:
Desktop:
Firefox (latest update on MacOS 10.14.3) - tabindex on ion-input not supporting tab-into. Tab key from first ion-input goes directly to the browser location bar.
Chrome and Safari - tabindex on ion-input "works" but it highlights the markup element first, then must tab again to focus into the contained .

Mobile web - iOS Safari, Chrome, FF - no indication that tabindex is respected. Usually browser will enable up/down arrows indicating navigation to the next input.

Expected behavior:
Desktop users want the tab key to move from input to next input directly (or next tabindex element in the flow), within a Form entry experience, enabling quick data entry as the highest priority.
The Firefox issue denies any use of the Tab key, must mouse-click to next input.

Steps to reproduce:
Setup a form with ion-input with tabindex values, and test in multiple browsers on desktop and mobile(web).

      <ion-item-group>
        <ion-item>
          <ion-label position="floating">*Name</ion-label>
          <ion-input name="name" required="true" tabindex="1"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating" >*Email</ion-label>
          <ion-input name="email" inputmode="email" type="email" required="true" tabindex="2"></ion-input>
        </ion-item>
      </ion-item-group>   

Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.10.3 (/Users/me/.nvm/versions/node/v8.10.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

System:
   NodeJS : v8.10.0 (/Users/me/.nvm/versions/node/v8.10.0/bin/node)
   npm    : 6.7.0
   OS     : macOS Mojave

[rveerd]

Also, the value of tabindex is ignored. If you set it to -1, the control is still tabbable. If you use non-sequential numbers for tabindex, the tab order is still sequential (DOM order).

If you set tabindex on the ion-item element instead, the tabindex does work and is not ignored. Not sure if this is how it is supposed to work. If so, please update the documentation with something like "you should set tabindex on the ion-item, not the ion-input".

However, this still has the issue reported originally, that is, you need to press tab twice to focus the input control itself.

Tested on Chrome on Windows.

[sonicwong]

I found the "prev/next" control on iOS FormAccessoryBar show in gray color.
No matter you put "tabindex" in ion-input or ion-item.
Is it because the input element generated in shadow dom?

[mattsteve]

This is a huge accessibility issue, and can cause corporations to be sued under the Americans with Disabilities Act. Fixing this should be on the top of your priority list.

[KasperAndersson]

Any updates on this matter?

[oneclickwebstudio]

Any updates in 2020?

[brandyscarney]

Thanks for the issue! I've added some fixes for ion-input so that the tabindex is properly set on the inner input. Please test it out using version 5.1.1 of Ionic Framework and let me know if you're still seeing issues, thanks!

[sertal70]

Hi, I've just tried the fix: native <input> tag actually now have the tabindex attribute set but on iOS prev/next arrows on keyboard are still disabled.

This is my ionic info ouput:

$ ionic info

Ionic:

   Ionic CLI                     : 6.9.2 (/Users/sergio/.nvm/versions/node/v12.16.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.0
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 9.1.0
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 1.5.2

Utility:

   cordova-res (update available: 0.14.0) : 0.11.0
   native-run                             : not installed

System:

   NodeJS : v12.16.1 (/Users/sergio/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

[liamdebeasi]

@sertal70 This is being tracked in another thread: https://github.com/ionic-team/ionic/issues/16498. This is a known issue in WebKit/Safari and not a bug in Ionic Framework.

For more context please see: https://github.com/ionic-team/ionic/issues/16498#issuecomment-557246893.

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