Keyboard nav only works after first mouse interaction

[eads]

Keyboard only works in gallery if you've interacted via another means. You can see this behavior in the carousel at the top of the official page: Using arrows on load does nothing, works once you've clicked a dot or one of the paddle arrows.

[desandro]

Thanks for reporting this issue. Yes, this is the default behavior. If you wish for a Flickity gallery to have the initial focus, you can do with with JS

// jQuery
var $gallery = $('.gallery').flickity({
  // options
})
// set initial focus
$gallery.focus();

// vanilla JS
var gallery = document.querySelector('.gallery');
// init Flickity
new Flickity( gallery, {
  // options
});
// set initial focus
gallery.focus();

See jQuery demo or vanilla JS demo

[eads]

Thanks, this is good to know. While it's not the behavior I expected, I entirely understand why you'd build it to work this way. Thanks for adding this to the docs.

[eads]

I'm noticing one odd behavior.

If you call focus in a chain everything is groovy:

$('.gallery').flickity().focus();

If you call focus in a separate call, it does not appear to work:

var $gallery = $('.gallery');
$gallery.flickity();
$gallery.focus();

I'll try and make a codepen for this later, gotta run to present a workshop that uses flickity right now (:

[desandro]

@eads Hmm. I was not able to reproduce http://codepen.io/desandro/full/RNEMrY

[frontenddevguy]

I ran into this issue and the demo is not working for me either on FF Dev 63.0b14 (64-bit) or regular FF. It does work in Chrome and Safari. Haven't tested mobile yet. I would expect first arrow press to work, before clicking on dots. It seems strange from usability perspective why it wouldn't?