search

simonwep / pickr

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
https://simonwep.github.io/pickr
MIT License
4.29k stars 287 forks source link

Accessibility via tab key #249

Closed Grzegorz4system closed 3 years ago

Grzegorz4system commented 3 years ago

Hello everybody,

I found several problems when I wanted to use a pickr on a web page.

The first issue it can be only one instance of pickr on the web page. Multiple instances crash funcionality of pickr. It is unconfortable when I wanna have more than one input/button in my form to select color from pickr. In that case I have to destroy and initialize another one.

The main problem is when I have more objects (inputs/buttons, etc.) on a web page, the focus of the pickr is lost. I have to tabulate other elements to the end of a web page to get focus to pickr. Pickr is useless in that case and does not meet the requirements of WCAG 2.0.

It would be nice when the focus is lost of the pickr it should be close automaticly in the main core code. Moreover it should be the same when focus is on the element of the pickr (it should be show).

Fiddle shows the problem of focus pickr when is more object to tabulate: https://jsfiddle.net/dLe1a2bu/5/

Best regards Grzegorz.

simonwep commented 3 years ago
  1. You can use multiple pickrs, but you can't use one instance for many as already discussed in #218 , #161 , #221 , #194 and #57... Each instance needs its very own reference element.
  2. Well, you could focus the pickr-widget after a input field gets focused, here you go. You can always write yourself a little utility function to do this with an arbitrary amount of input fields. And as already mentioned features won't be added (at least not from my side) anymore, so it's either a useless feature-request or you could've just written yourself a utility-function.
Grzegorz4system commented 3 years ago

Hi,

thank you for responding for the issue.

  1. Yea, I have noticed it while I was reading another issues. I thought that many instances of pickrs crash funcionality of accessibility. But I figured out that it is not true in this case.

  2. Still it does not work. In your example all is fine (only one element on the page) but the problem is when you have more elements to focus in a form (I have to tabulate other elements to the end of a form to focus the first pickr widget) then it does not work (I have updated the code to focus pickr) . I wrote that before and fiddle shows the issue. Check it please.

Fiddle: https://jsfiddle.net/dLe1a2bu/7/

Best regards Grzegorz.

Grzegorz4system commented 3 years ago

Hello,

is someone there? I am still waiting for any answer.

simonwep commented 3 years ago

What about using the blur event and un-focusing it manually? Could you please provide step-by-step information on how to reproduce it (I still don't quite get what you mean by "it does not work" - what does not work?)?

Grzegorz4system commented 3 years ago

Thank you for the answer.

I did not try blur event yet but I will check this idea.

You just have to several elements (focusable) in a from. I initialize the first input of the form (to show pickr-widget). Then I press a key tab to focus the input with my pickr. While focus event triggers the pickr shows up and it is not focusable. Until I tabulate the rest inputs of the form to the end and then the pickr is focusable and I can work with.

Fiddle shows the issue/problem. Check it please.

Fiddle: https://jsfiddle.net/4hczoLkr/

Best regards Grzegorz.

simonwep commented 3 years ago

You'll have to manually redirect the focus using Javascript. This is out of scope and more of a job for your form library or whatever you're using.