Open Bug 1596960 Opened 3 years ago Updated 9 months ago

Google Translate Widget creates keyboard trap on use

Categories

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

70 Branch
defect

Tracking

()

Webcompat Priority P3
Tracking Status
firefox-esr68 --- fix-optional
firefox70 --- wontfix
firefox71 --- fix-optional
firefox72 --- affected

People

(Reporter: charles.belov, Unassigned, NeedInfo)

References

Details

(Keywords: parity-chrome, webcompat:needs-diagnosis)

Attachments

(1 file)

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

  1. Press Tab key until Vietnamese on the page itself, not the Google Translate top bar, is outlined
  2. Press Enter
  3. Press Tab key

Actual results:

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

Workaround:

  1. Press F5 to reload the page
  2. Press Tab key until Vietnamese on the page itself, not the Google Translate top bar, is outlined
  3. Press Enter
  4. Press Tab key

Expected and actual result: English is outlined

  1. Press Enter

Alternate workaround:

  1. Press F5 to reload the page
  2. Press Tab key until Show original on the Google Translate top bar, is outlined
  3. Press Enter

Expected results:

English is outlined

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

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

Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: parity-chrome
Component: Untriaged → Keyboard Navigation
Component: Keyboard Navigation → DOM: UI Events & Focus Handling
Product: Firefox → Core
Webcompat Priority: --- → ?

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.

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

Flags: needinfo?(miket)

(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?

Flags: needinfo?(mbrodesser)
Flags: needinfo?(kberezina)
Flags: needinfo?(miket)
See Also: → 1599702

Mike: created and linked a new issue.

Flags: needinfo?(mbrodesser)
Priority: -- → P2
Attached file 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

Webcompat Priority: ? → P3
You need to log in before you can comment on or make changes to this bug.