Search code examples
javascriptjqueryhtmlbxslider

bxslider accessibility tabbing distorts slide alignment

I'm using bxslider and have created 2 jsfiddles that show my problem.

We were have accessibility issues so I've upgraded the library to 4.2.3 which has better support

This is an example of bxslider and you can tab through the controls and everything is fine

http://jsfiddle.net/qax7w8vt/2/embedded/result/

The problem comes when there's a focusable element in one of the slides and when you tab through the content the slider alignment is distorted and never really recovers

http://jsfiddle.net/qax7w8vt/1/embedded/result/

enter image description here

Possible solutions...

  1. tabindex=-1 on the "a" element but problem is that can't ever tab to the link
  2. Listen out to a slide transition and somehow re-align the slider

I couldn't find a bug for this listed in their issue list so does anyone have a suggestion on how to handle this?

Better to check the fiddle but here's part of the source

<div style="width: 730px; position: relative; margin: 0 auto;">
    <ul class="bxslider">
        <li>
            <img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" />
        </li>
        <li><a href="http://google.com" style="position: absolute;left:200px; bottom:40px;">Some link here</a>
            <img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" />
        </li>
        <li>
            <img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" />
        </li>
    </ul>
</div>

    $(document).ready(function () {
        $('.bxslider').bxSlider({
            slideWidth: 730,
            mode: 'horizontal',
        });
    });
Solution

  • I don't know, maybe its a bug?

    but, i can make a prevention using a jquery focus listener

    $( "#prevent" ).focus(function() {
    slider.reloadSlider();
});

    here the fiddle: http://jsfiddle.net/qax7w8vt/3/