Ionic-framework: [4.0.0-rc.0] Tab Key Navigation in Firefox

[WedlakeThinkingBig]

Bug Report

Ionic version:
[x] **4.0.0-rc.0

Current behavior:

Tab navigation works as expected in Chrome and Safari but does not appear to work at all in Firefox (untested in Edge).

Expected behavior:

The user should be able to navigation the page through pressing the tab key. This is especially important when attempting to meet accessibility standards.

Steps to reproduce:

Spin up an Ionic app and create a new page. Throw some buttons on there or inputs and note how when using Firefox tabbing for page navigation does not work. It appears that you can tab to the first focusable element but it will not navigate the page from there (returns back to the browser bar).

Other information:

Even manually setting a tab index on the buttons does not seem to resolve the issue. I have tried manually handling the tab key with an event listener but there must be a directive or something similar attached to the buttons that "eats" the focus event. Any feedback or help with this issue would be welcome as the project I'm building requires accessibility and it would be good to not have to limit our users to Safari/Chrome.

Ionic info:

   ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.10.5
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.3
   @ionic/angular-toolkit        : 1.2.0

[vali-de-man]

I'm encountering the very same issue!
I already did some research on this, see https://github.com/ionic-team/ionic/issues/14604

I closed that issue because tab navigation does work in older versions of Firefox e.g. 60.4.0esr, but never really found a solution.

[NiklasMerz]

I can confirm this issue on the latest Firefox 64. Hitting the tab key only navigates through the browser controls not the Ionic page.

[thmclellan]

This issue still exists when tabbing between ion-inputs in Ionic 4.0.0 with Firefox 64.

To confirm what @WedlakeThinkingBig found in 4.0.0, I tried adding tabIndex="0" to the ion-input, and also adding tabIndex="0" to the underlying native input (as an attribute in FireFox dev tools), but no luck with either. Hard to know if this is something at the ion-input level or stencil-based.

Without hacking some kind of blur/focus work around (not sure if that's possible), it seems the only way for desktop users to complete a form with ion-inputs in Firefox is to click into each field individually.

[thmclellan]

This looks like the same issue as https://github.com/ionic-team/ionic/issues/16498. Firefox tabbing works fine between <ion-inputs> so long as they are not wrapped in <ion-item>.

Firefox may not support tabbing between inputs inside of shadow DOM elements like <ion-item>.

[thmclellan]

Good news, the tab key issue with ion-item has been fixed in FireFox nightly build 67.0a1 per https://github.com/ionic-team/ionic/issues/16498.

[brandyscarney]

Thank you for the issue! Is anyone still seeing problems with latest of Ionic and Firefox? I am not able to reproduce using the following:

Firefox: 67.0.4 (64-bit
Ionic: 4.6.0

[brandyscarney]

Closing as no reply and cannot reproduce.

[NiklasMerz]

This is fixed for my app with a somewhat recent version 👍

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