The eyedropper tool when selected on a colorpicker, the users' cursor focus is not visible on the colorpicker popup,but accepts the input from behind

Question

REF: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

The first two examples: (using only mouse cursor)

1. Navigate to the Color picker control.
2. Navigate and activate the 'Eyedropper tool'.
3. Navigate to the colorpicker popup appeared.
4. Observe that the users' cursor focus is behind the colorpicker popup, but accepts the input for that color on the popup.

How one can handle this to enhance the accessibility as the popup appeared is a native html functionality. And, the users' focus is behind the popup and accepts the input for the popup at the same time.

Expectation: To enhance usability and remove the users' focus lost when selects eyedropper tool.

Answer 1

AS it's a native control, you can't do much to improve accessibility, and it's even worse: what you may try could create problems with other browsers, or even with firefox in a few months or years. It might seem counter-intuitive, but the best is . . . to do nothing.

That's both the advantage and the drawback of native controls. When it's accessible, it's the best, but when it isn't, that's the worst.

The best you could do is contact accessibility team at Mozilla and tell them about your problem. Maybe they will fix it, and maybe they won't because it's already the result of whatever compromise. Maybe you think it's a problem, but in fact isn't really one for most users.

IF you can't wait for a fix, you can decide to use a custom component instead of the native one. But be aware that:

• You are going to degrade the accessibility for most users in most situations, as you generally won't be able to beat native support despite all your good will
• You have to maintain your custom component, while native ones get improvements over time for free