CODEWITHSUNDEEP
jqueryfancyboxaccessibility
kavallier
kavallier

Reputation: 31

Setting focus to fancybox 2

I used to use an onComplete function in previous versions of fancybox to set focus to the fancybox (to make a site more accessible to those using keyboards).

It seems fancybox 2 doesn't follow the same syntax. Is anyone able to help out with some code to set focus to a fancybox once it's rendered?

Used to be:

$(".fancybox-call").fancybox({
               padding:   20, 
        fitToView   : false,
        width       : 960,
        height      : 615,
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
                type                : 'inline',
                onComplete : function () {
                                          $(".fancybox-wrap").focus();
                                }
});

Now trying:

$('a#feedback-button').each(function(){
    $(this).fancybox({
            padding     : 0,
            fitToView   : false,
            width       : 700,
            height      : 820,
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            type        : 'iframe',
            scrolling   : 'no',
            beforeShow   : function() {
                             $(".fancybox-inner").focus();
                        }
    });

with no luck.

Without setting focus to fancybox, keyboard users have to tab through the whole of the calling page, before getting access to the form within the fancybox.

Upvotes: 3

Views: 3964

Answers (2)

Muhammad Tanweer
Muhammad Tanweer

Reputation: 912

The following should be added to the fancybox call. It works on all content (inline, ajax or html)

afterShow: function () {
    $(this.content).attr("tabindex",1).focus()
}

So the fancybox call should look like.

$(".your_element_class").fancybox({
    afterShow: function () {
        $(this.content).attr("tabindex",1).focus()
    }
});

Please change "your_element_class" to the class of your html element on which you are calling fancybox.

Upvotes: 0

Samuel De Backer
Samuel De Backer

Reputation: 3461

As of Fancybox 2.1.4, the close button is an anchor and no more a div tag, so I just set this code to focus the close button :

afterShow: function(){
    $('.fancybox-close').focus();
}

I also changed the keys config to remove next link triggered by enter key, so enter key will close Fancybox :

keys  : {
    next : {
        34 : 'up',   // page down
        39 : 'left', // right arrow
        40 : 'up'    // down arrow
    },
    prev : {
        33 : 'down',   // page up
        37 : 'right',  // left arrow
        38 : 'down'    // up arrow
    },
    close  : [27], // escape key
    play   : [32], // space - start/stop slideshow
    toggle : [70]  // letter "f" - toggle fullscreen
},

Upvotes: 4

Related Questions