question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Accessibility] ion-input tabindex cross-browser difference

See original GitHub issue

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 <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:closed
  • Created 5 years ago
  • Reactions:9
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
qliqdevcommented, Feb 21, 2020

Any updates in 2020?

8reactions
mattstevecommented, Nov 7, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cross-Browser Tabindex Woes - Alex Lande
Cross-Browser Tabindex Woes. The HTML tabindex attribute is a useful tool for accessibility when used properly.
Read more >
tabindex - HTML: HyperText Markup Language | MDN
The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation ...
Read more >
How-to: Use the tabindex attribute - The A11Y Project
tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number...
Read more >
Focus & Keyboard Operability - Usability & Web Accessibility
When an HTML element is able to handle keyboard input, it is said to have focus. Exactly one element is able to have...
Read more >
A Complete Guide To Accessible Front-End Components
Every browser has default focus styles, yet out of the box, they aren't very accessible. The goal of :focus is to give the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found