Closed Bug 1526820 Opened 5 years ago Closed 4 years ago

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

Categories

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

65 Branch
defect

Tracking

()

VERIFIED FIXED
82 Branch
Tracking Status
firefox82 --- verified

People

(Reporter: carolynmacleod4, Assigned: evilpie)

References

()

Details

(Keywords: dev-doc-complete)

Attachments

(1 file)

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

Component: Untriaged → Disability Access
Status: UNCONFIRMED → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE

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.

Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: DUPLICATE → ---
Component: Disability Access → Layout: Form Controls
Product: Firefox → Core

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

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(jwatt)
Flags: needinfo?(jwatt)
Priority: -- → P2
Assignee: nobody → evilpies

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.

Keywords: dev-doc-needed
Attachment #9171406 - Attachment description: Bug 1526820 - Explicitly focus color picker on Windows. r?bobowen → Bug 1526820 - Handle WM_INITDIALOG in the ColorPicker hook to enable keyboard focus r?cmartin
Pushed by evilpies@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/4b4f61eed34b
Handle WM_INITDIALOG in the ColorPicker hook to enable keyboard focus r=cmartin
Status: REOPENED → RESOLVED
Closed: 5 years ago4 years ago
Resolution: --- → FIXED
Target Milestone: --- → 82 Branch
Flags: qe-verify+

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

Status: RESOLVED → VERIFIED
Flags: qe-verify+
See Also: → 1666707
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: