I'm building this custom layout, and I am getting some weird stuff going on with Firefox.
As you can see, the images are not focusable, either by tab or mouse click on Firefox. This works fine on Chrome. They do need to be images, because the final product will be svgs, and they need to be clickable and keyboard accessible both!
And here's my JS code
if ( jQuery(window).width() > 900) {
//Execute only when width is greater than 900px
var circles = document.getElementsByClassName("js-circle"),
text = document.getElementsByClassName("js-text"),
buttons = document.getElementsByClassName("js-button");
for (var i = 0; i < circles.length; i++) {
console.log("assign listeners");
assignListeners(i);
}
function assignListeners(i) {
(function(i) {
circles[i].addEventListener('focus', function(e) {
console.log(circles[i]);
reveal(e, i);
}, false);
buttons[i].addEventListener('blur', function(e) {
hide(e, i);
}, false);
}(i));
}
function reveal(e, i) {
jQuery(text[i]).fadeIn();
}
function hide(e, i) {
jQuery(text[i]).fadeOut();
}
}
