1586727 - On Google Applications menu pressing enter has the same effect as escape

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P3)

Description

[Alex ARNAUD]

Hello,

Environment:

• Debian 9 "Stretch"
• Firefox Nightly (also reproduce in Firefox ESR 60)

Steps to reproduce:

1. Open www.google.com and ensure you're connected to your Google Account
2. The following steps are made with the keyboard-only
3. Tab until going to the Google Applications menu and press enter
4. Tab until going to "Youtube" and press enter

Result with Firefox:
The Google Applications menu is closed as we've made "escape"

Result with Google Chrome:
We're going on "Youtube"

Best regards.

Comment 1

[Gian-Carlo Pascutto [:gcp]]

Redirecting to webcompat to verify this isn't simply another bug in Google's sites.

Comment 2

[Gian-Carlo Pascutto [:gcp]]

(Especially as this is evidently not a regression in Firefox)

Comment 3

[Mike Taylor [:miketaylr]]

Cipri, can you test across platforms here? I'm not able to reproduce on macOS or Ubuntu.

(Note: I can't even tab to that menu on macOS?)

Comment 4

[Gian-Carlo Pascutto [:gcp]]

It does reproduce under Ubuntu 18.04 + Nightly for me.

Comment 5

[Ciprian Ciocan [:ciprian]]

Mike, I tested the issue on my Windows machine and I was able to access the YouTube site following the steps to reproduce presented above.

Indeed, the Google Apps menu is not accessible by using the tab key on macOS. If you manually select the Google Apps menu, using the tab key selects only the first option from the menu and does not switch to other options, hence the only way to reach the YouYube icon using the tab key is by placing the icon as the first selection option from the menu.

Tested with:
Browser / Version: Firefox Nightly 71.0a1 (2019-10-08), Firefox ESR 60.9.0
Operating System: Windows 10 Pro, macOS 10.15

Comment 6

[Alex ARNAUD]

I've just checked on a Windows 10 VM and I've reproduced the issue.

Best regards.

Comment 7

[Mike Taylor [:miketaylr]]

So, to recap:

For some people (gcp, Alex), the bug reproduces on:
Ubuntu 18
Debian 9
Windows 10 VM

For others (Mike, Cipri), it does not reproduce on:
macOS
Windows 10 VM
Windows 10
Ubuntu VM

I'm not sure what to make of that. Karl, can you get this to reproduce?

Comment 8

[Karl Dubost💡 :karlcow]

so on macOS, it is not possible to tab to the specified icon. When loading the page the search form is autofocus. Each steps below is the focus order when tabbing.

0. Search form autofocused
1. Google Search
2. I'm Feeling lucky
3. back button of the browser chrome
4. the shield icon/URL bar. browser chrome
5. URL bar with selection of the URL. browser chrome
6. three dots menu in URL bar. browser chrome
7. library icon menu. browser chrome
8. the full document context
9. back to the search form.

I don't have external keyboard. I'm using a macbook laptop. And the browser window is on a secondary screen. The profile is fresh without any addons. I just logged in to accounts.google.com, before accessing google.com with a private test account. Not using the mozilla account.

If I click the 9 squares icon (for Google app), a menu opens. If I tab starting here, no tab navigation is happening at all.

The tab focusable items are

<input class="gLFyf gsfi"
       maxlength="2048"
       name="q"
       type="text"
       jsaction="paste:puy29d"
       aria-autocomplete="both"
       aria-haspopup="false"
       autocapitalize="off"
       autocomplete="off"
       autocorrect="off"
       role="combobox"
       spellcheck="false"
       title="Search"
       value=""
       aria-label="Search"
       data-ved="0ahUKEwi4pLnSvZDlAhXQF4gKHfp4CK4Q39UDCAQ">

<input class="gNO89b"
       value="Google Search"
       aria-label="Google Search"
       name="btnK"
       type="submit"
       data-ved="0ahUKEwi4pLnSvZDlAhXQF4gKHfp4CK4Q4dUDCAk">

<input class="RNmpXc"
       value="I'm Feeling Lucky"
       aria-label="I'm Feeling Lucky"
       name="btnI"
       type="submit"
       jsaction="sf.lck"
       data-ved="0ahUKEwi4pLnSvZDlAhXQF4gKHfp4CK4Q19QECAo">

Elements with a tabindex… and should be focused.

<a class="gb_B gb_sc"
    href="https://www.google.co.jp/intl/en/about/products?tab=wh"
    title="Google apps"
    aria-expanded="false"
    role="button"
    tabindex="0"></a>


<a class="gb_B gb_Da gb_g"
    href="https://accounts.google.com/SignOutOptions?hl=en&amp;continue=https://www.google.com/%3Fgws_rd%3Dssl"
    role="button"
    tabindex="0"
    title="Google Account: *****  
(****@gmail.com)"
    aria-expanded="false">
    <span class="gb_xa gbii"
            aria-hidden="true"></span>
</a>

and still both are not focused.

note that there is a bunch of tabindex bugs
https://bugzilla.mozilla.org/buglist.cgi?quicksearch=tabindex&list_id=14934006

but not sure if ones relate to this one specifically. We would need someone with a better knowledge for this.

I also noticed this script in the main page which makes a call to tabindex, but i don't know if it's related at all.

                ((m = l.getAttributeNode("tabindex")),

Comment 9

[Karl Dubost💡 :karlcow]

Attachment: Capture d’écran 2019-10-10 à 10.41.54.png

https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute

If the value is a zero

The user agent must allow the element to be considered as a focusable area and should allow the element and any focusable areas that have the element as their DOM anchor to be sequentially focusable.

The relative ordering within a tabindex-ordered focus navigation scope for elements and focusable areas that belong to the same focus navigation scope and whose tabindex value is zero should be in shadow-including tree order.

if I add this CSS

[tabindex] {outline: 1px solid red  }

I get the screenshot. So the elements are focusable, but this is not happening. So I guess something else is controlling the focusability.

Comment 10

[Karl Dubost💡 :karlcow]

Also note that on Firefox with a Google Chrome UA, the same issue is happening.
With Chrome on the same device (macbook), the focus is going to a lot more expected places including some of the links at the bottom.

Comment 11

[Mike Taylor [:miketaylr]]

Strange, when I tested this before the menu was tab navigable. But today it is not.

Comment 12

[Karl Dubost💡 :karlcow]

Makoto san said that it could be because of XBL being removed.
And this one was fixed yesterday Bug 1513325 which was the last binding.

Comment 13

[Mike Taylor [:miketaylr]]

Alex, does this still reproduce for you? It is working for me in Ubuntu (but it never reproduced before).

Somehow it seems like each OS/platform exposes different primitives for keyboard navigation and Firefox is obeying them (?)

Comment 14

[Alex ARNAUD]

(In reply to Mike Taylor [:miketaylr] from comment #13)

Alex, does this still reproduce for you? It is working for me in Ubuntu (but it never reproduced before).

Somehow it seems like each OS/platform exposes different primitives for keyboard navigation and Firefox is obeying them (?)

I no longer reproduce it. Thanks for asking.