1596960 - Google Translate Widget creates keyboard trap on use

Status: NEW

(Core :: DOM: UI Events & Focus Handling, defect, P2)

Description

[Charles Belov]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

If I activate Vietnamese translation via keyboard and try to deactivate it using the dropdown on the SFMTA.com web page, my keyboard becomes trapped and I can no longer navigate the page using only the keyboard.

Steps in Firefox 70.0.1:

1. Go to https://www.sfmta.com/services/business-services/construction-regulations
2. Press Tab key until Select Language is outlined
3. Press Enter
4. Press Tab key until Vietnamese is outlined
5. Press Enter

Expected and actual results: Page redisplays in Vietnamese

6. Press Tab key until Vietnamese on the page itself, not the Google Translate top bar, is outlined
7. Press Enter
8. Press Tab key

Actual results:

Nothing happens. Further Tab and Enter key presses have no effect (keyboard trap)

Workaround:

9. Press F5 to reload the page
10. Press Tab key until Vietnamese on the page itself, not the Google Translate top bar, is outlined
11. Press Enter
12. Press Tab key

Expected and actual result: English is outlined

13. Press Enter

Alternate workaround:

9. Press F5 to reload the page
10. Press Tab key until Show original on the Google Translate top bar, is outlined
11. Press Enter

Expected results:

English is outlined

Works in Chrome Version 78.0.3904.97 (Official Build) (64-bit)

Comment 1

[Alice0775 White]

I can reproduce on Nightly72a1, 68esr as well as 60esr windows10.

Comment 2

[Mirko Brodesser (:mbrodesser)]

The issue is reproducible also when choosing a language element different from the last one (e.g. Spanish).

A similar problem can be observed on other pages using the google translate widget, e.g.:
STR:

1. Visit https://www.walkertek.com/google-translate-sample-page/.
2. Press "Tab" multiple times to select the "Select Language" select-element.
3. Press "Enter".

Expected: menu should open.
Actual: nothing happens.

Works with Chrome.

Comment 3

[Hsin-Yi Tsai [:hsinyi]]

Hi Mike, sorry, me again. ;) Is this something your team can help diagnose a bit?

Comment 4

[Mike Taylor [:miketaylr]]

(In reply to Mirko Brodesser (:mbrodesser) from comment #2)

The issue is reproducible also when choosing a language element different from the last one (e.g. Spanish).

A similar problem can be observed on other pages using the google translate widget, e.g.:
STR:

1. Visit https://www.walkertek.com/google-translate-sample-page/.
2. Press "Tab" multiple times to select the "Select Language" select-element.
3. Press "Enter".

Expected: menu should open.
Actual: nothing happens.

Interesting -- but pressing up or down arrows (at least on macOS) does cause the select menu to open. This is probably a different bug. Mirko can you file a new one?

As for the original issue reported, on macOS it's not even possible to focus the language widget. It just gets skipped over. I can reproduce on Windows and Ubuntu though... Ksenia, can you take a look at this issue?

Comment 5

[Mirko Brodesser (:mbrodesser)]

Mike: created and linked a new issue.

Comment 6

[Ksenia Berezina [:ksenia]]

Attachment: google-translate.html

I've moved the google translate widget to a separate file. Wasn't able to come up with a reduced test case just yet, but noticed a couple things.

The pop up list of languages is being displayed in an iframe when I click/press Enter on the drop down. The keyboard trap happens only after attempting to select a language for the second time. After selecting a language for the first time the following method is used to hide the iframe:

    function Q(a, b) {
        a.style.display = b ? "" : q
    }

so the iframe gets display:none. If I change the code to alter visibility instead of display, e.g. a.style.visibility = b ? '' : 'hidden' then the keyboard trap doesn't happen.

So perhaps it has something to do with the fact that the iframe is hidden with display:none. I'll continue to investigate this and try to come up with a reduced case