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!
ImagePickerOption.prototype.create_node = function() {
var image, imgAlt, imgClass, thumbnail;
this.node = jQuery("<li/>");
//Added tab stop to image
image = jQuery("<img class='image_picker_image' tabindex='0'/>");
image.attr("src", this.option.data("img-src"));
thumbnail = jQuery("<div class='thumbnail'>");
imgClass = this.option.data("img-class");
if (imgClass) {
this.node.addClass(imgClass);
image.addClass(imgClass);
thumbnail.addClass(imgClass);
}
imgAlt = this.option.data("img-alt");
if (imgAlt) {
image.attr('alt', imgAlt);
}
thumbnail.on("click", this.clicked);
//Added keypress for space & enter which calls the above click event
thumbnail.keypress(function(event) {
if (event.keyCode === 0 || event.keyCode === 32 || event.keyCode === 13) {
event.preventDefault();
thumbnail.click();
}
});
thumbnail.append(image);
if (this.opts.show_label) {
thumbnail.append(jQuery("<p/>").html(this.label()));
}
this.node.append(thumbnail);
return this.node;
};
return ImagePickerOption;
})();
rvera
Humni
Add option to control the picker via keyboard