search

rvera / image-picker

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
http://rvera.github.com/image-picker
Other
907 stars 216 forks source link

Implemented keyboard navigation for accessibility #109

Closed lowegreg closed 5 years ago

lowegreg commented 6 years ago

I needed to add accessibility to my site and was using the edited version of the control by @AndreasIgelCC. But noticed that it was an older version and had issues with alt image tags (another accessibility feature). I came up with the following solution, but if anyone can improve on it please let me know.

A huge shoutout to @rvera for great work by the way!

lowegreg commented 6 years ago

Hold off on merging this request. I've been working on an accessible star rater and have come up with more intuitive keyboard navigation.

rvera commented 6 years ago

Will do, thanks for working on this.

lowegreg commented 6 years ago

Okay, I've rewritten the keyboard control functions to better match 'normal' form behaviour. Tab to enter the control and cursor to move around within the control while enter and spacebar calls the click function. When you leave the control either by keyboard or mouse it places a tabstop to either the selected value if one exits or the first available item. I'm always open to improvements so if anyone has suggestions on improving either the functionality or my syntax please let me know.

@rvera one issue is I don't write coffeeScript. Did you want to lend a hand with that section?

Cheers, Greg

lowegreg commented 6 years ago

Oops, I found one error that comes up when you have multiple image-pickers next to each other. I have also not done any testing using the font awesome implementation. Update coming soon...

Cheers, Greg

lowegreg commented 6 years ago

Oaky,

I'm done with the updates. @rvera as I mentioned I'm not that proficient in coffee, so I've only update the js files. If someone wants to make the required coffee script changes feel free. I hope this is helpful to some ppl.

Cheers, Greg

Humni commented 6 years ago

I'll have a go at putting it into coffee script for you

lowegreg commented 6 years ago

Thanks @Humni if you have any question or can improve the script pls let me know...

G

Humni commented 6 years ago

I have written a coffee script implementation of this in this pull request #111 Awesome work by the way @lowegreg !

lowegreg commented 6 years ago

@Humni I can't stop playing with this code. I found another bug, which is VERY small and I'm probably the only one who would ever come across it. I will get a fix up later today, but if I'm making this small change, I thought I'd test the font awesome integration. Does anyone have a sample index file that uses .fa images???

G

rvera commented 6 years ago

I don't at hand, but you can find the code for the github page here https://github.com/rvera/image-picker/tree/gh-pages which is what I usually use to test the new features. As I update the index with the new examples and test them there.

lowegreg commented 6 years ago

Change the tabindex element to the containing div instead of the image so it is easier to see on chrome browsers. I also removed the tabindex if the user is using a mouse. The addition of the focus outline was distracting for users not navigating with a keyboard. I've tested this pretty thoroughly on chrome/firefox/safari/ie both win and mac. I can't see any issue... I also tried using font awesome icons in place of images and it works great.

Cheers, Greg

@Humni Sorry mate I only made the changes to the js and css files. If you're up for it could you update the sass and coffee files...

Humni commented 6 years ago

@lowegreg No worries, have updated it now. If you could please test the coffee script version that would be great

lowegreg commented 6 years ago

@Humni tested and everything looks good thanks.

G

Humni commented 5 years ago

Resolved in PR #111