[Accessibility] ion-input tabindex cross-browser difference
See original GitHub issueBug 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 <ion-input> 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:9
- Comments:9 (2 by maintainers)
Top GitHub Comments
Any updates in 2020?
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.