1526820 - <input type="color"> does not work with keyboard

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect, P2)

Description

[Carolyn MacLeod]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Steps to reproduce:

On Windows.
Go to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
Scroll down to the demo.
Give focus to either the Head or the Body color input button.
Now, using only the keyboard, type Space or Enter to open the color picker dialog.
Still using only the keyboard, type Tab. Type Shift+Tab. Type Enter. Type Esc. Type Space. Type arrow keys.

Actual results:

Nothing. I cannot navigate within the dialog, or activate the dialog's buttons, or select a color, or close the dialog, or anything useful using the keyboard. It is as if the dialog does not have focus.

I found only 2 ways to get out of this focus trap... either type Alt+F4 to close the dialog, or type Alt+Tab to switch to a different window then type Alt+Tab again to switch back, and suddenly the dialog has focus and works properly.

Expected results:

I would expect to be able to use the keyboard to navigate within the dialog, activate the dialog's buttons, select a color, close the dialog, etc. (in a natural way... not needing to type Alt+Tab twice first).

Not sure if this needs to be part of: https://bugzilla.mozilla.org/show_bug.cgi?id=1445061

Comment 2

[Carolyn MacLeod]

Please reopen this bug, because it is not a duplicate.
Note Jamie's comment 20 bug 559767 that says:

Yup, it's an OS dialog... and the way Firefox is popping it up is causing focus loss. That's a separate bug, though.

Unfortunately, the "separate bug" being referred to is this one, which is currently closed.

Comment 3

[Zoltan Hawryluk]

Any updates on this bug? This is definitely something that is preventing us from using <input type="color" /> on a production site.

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 6

[Tom S [:evilpie]]

Attachment: Bug 1526820 - Handle WM_INITDIALOG in the ColorPicker hook to enable keyboard focus r?cmartin

I don't really know Windows programming, but it seems to me like just focusing the dialog
after creating it shouldn't cause any major issues.

I tried this patch and it seems like with it applied I can move around the color "fields"
using the keyboard.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4b4f61eed34b
Handle WM_INITDIALOG in the ColorPicker hook to enable keyboard focus r=cmartin

Comment 8

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/4b4f61eed34b

Comment 9

[Tom S [:evilpie]]

Added to https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/82.

Comment 10

[Cristian Fogel [:cfogel]]

Verified patch with 82.0b2 on Windows 10, macOS 11.0.