Shortcode: Slideshow: Make keyboard accessible

[kraftbj]

The controls for the slideshow only appear on mouseover, making it difficult for keyboard users.

Initial look suggests this is what's requiring the mouse: https://github.com/Automattic/jetpack/blob/3.1.1/modules/shortcodes/js/slideshow-shortcode.js#L123-129

From user, ideal would be to remove the fade, always display, and ensure it can be reached via tab.

Reported in http://wordpress.org/support/topic/jetpack-and-web-accesibility?replies=1

[chrisdc]

Is everyone in favour of making the controls permanently visible, or is it worth a go at fading the controls in on focus as well as mouse over?

[georgestephanis]

@MichaelArestad and @lancewillett -- thoughts from a design/aesthetic perspective?

[MichaelArestad]

I would make the controls always visible albeit somewhat transparent until hover. Like @kraftbj said, the current design makes it difficult and unintuitive for touchscreen users.

[georgestephanis]

So, maybe dim it to effective 50% opacity or the like? Unsure of the best way to actually apply a fix for ~.

[MichaelArestad]

Probably something like this:

I just halved the background size and did some positioning adjustments in Inspector.

[chrisdc]

Sorry, but aren't we looking into this type of gallery? Quite possible I may be missing the point.

[kraftbj]

@MichaelArestad and @georgestephanis , @chrisdc is correct. This ticket is specifically for the Slideshow (not Carousel), though I'm fine with making both better :-)

[chrisdc]

There's a probably a better way of checking for focus, but replacing this with opacity: 0.5; and the code linked above with this does seem to work:

var controls = jQuery( this.controlsDiv_ );
slideshow.on( 'mouseenter focusin', function() {
    controls.stop();
    controls.fadeTo( 400, 1 );
} );
slideshow.on( 'mouseleave focusout', function() {
    if ( ! jQuery( slideshow ).find( ':focus' ).length ) {
        controls.fadeTo( 400, 0.5 );
    }
} );

[enejb]

Hi @chrisdc
Can you add
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
to the css as suggested by
http://css-tricks.com/css-transparency-settings-for-all-broswers/

Also can you make the fade transitions 200ms instead of 400ms I find 400ms just a bit too slow.
I think lines :
controls.stop();
controls.fadeTo( 400, 1 );
can be made into one
controls.stop().fadeTo( 400, 1 );

Thanks for your contributions let me know if you have any questions 👍

[chrisdc]

Hi @enejb I've added the code you asked for to the pull request. Let me know if you would like me to squash my changes at any point.