Created
March 22, 2013 03:51
-
-
Save etienned/5218834 to your computer and use it in GitHub Desktop.
Patch to Fancybox that add accessibility improvement by disabling background tabbing and return focus to tabbed element after close. This feature can be turn on/off by setting the tabFocus option. Check this pull request for more info: https://github.com/fancyapps/fancyBox/pull/526
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# HG changeset patch | |
# User etienne <[email protected]> | |
# Date 1363923789 14400 | |
# Node ID af13fed965d5dadc1b1cac9eb73a0be664f0101f | |
# Parent 532037e7911b9e9f7c06715117ad61873c6ccb9a | |
Added option to use tab key to focus prev, next and close navigation in fancybox. | |
diff --git a/mmac/utils/static/mmac/js/libs/fancybox/jquery.fancybox.js b/mmac/utils/static/mmac/js/libs/fancybox/jquery.fancybox.js | |
--- a/mmac/utils/static/mmac/js/libs/fancybox/jquery.fancybox.js | |
+++ b/mmac/utils/static/mmac/js/libs/fancybox/jquery.fancybox.js | |
@@ -15,6 +15,8 @@ | |
var W = $(window), | |
D = $(document), | |
+ base_focusable_elements, | |
+ | |
F = $.fancybox = function () { | |
F.open.apply( this, arguments ); | |
}, | |
@@ -171,6 +173,9 @@ | |
prevEasing : 'swing', | |
prevMethod : 'changeOut', | |
+ // Disable tab key navigation on prev, next, close (used for accessibility) | |
+ tabFocus : false, | |
+ | |
// Enable default helpers | |
helpers : { | |
overlay : true, | |
@@ -354,6 +359,13 @@ | |
F.group = group; | |
+ if (F.opts && F.opts.tabFocus) { | |
+ // Remove enter key for next so it can be use to trigger | |
+ // focused navigation element | |
+ delete F.opts.keys.next[13]; | |
+ F.fancybox_disable_base_elements(); | |
+ } | |
+ | |
return F._start(F.opts.index); | |
}, | |
@@ -417,6 +429,10 @@ | |
F.wrap.stop(true, true).removeClass('fancybox-opened'); | |
F.transitions[ F.current.closeMethod ](); | |
+ | |
+ if (F.current && F.current.tabFocus) { | |
+ F.fancybox_enable_base_elements(); | |
+ } | |
} | |
}, | |
@@ -764,6 +780,25 @@ | |
$.event.trigger(event + '.fb'); | |
}, | |
+ fancybox_disable_base_elements: function() { | |
+ // Special Credit and Thanks to whatcould's edit for fancyBox 1 | |
+ // https://github.com/whatcould/fancybox/commit/231087ba1399d84589e29488cb98a2acb9e84624 | |
+ base_focusable_elements.each(function(){ | |
+ // push the previous tab-index into a data attrib | |
+ var el = $(this); | |
+ el.data('prev-tabindex', el.attr('tabindex')); | |
+ el.attr('tabindex', '-1'); | |
+ }); | |
+ }, | |
+ | |
+ fancybox_enable_base_elements: function() { | |
+ // reset the tabindex back to what we put in the data-attrib. | |
+ base_focusable_elements.each(function(){ | |
+ var el = $(this); | |
+ el.attr('tabindex', el.data('prev-tabindex')); | |
+ }); | |
+ }, | |
+ | |
isImage: function (str) { | |
return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp)((\?|#).*)?$)/i); | |
}, | |
@@ -1494,6 +1529,10 @@ | |
inner : null | |
}); | |
+ if (obj.tabFocus) { | |
+ $(obj.element).focus(); | |
+ } | |
+ | |
F.trigger('afterClose', obj); | |
} | |
}); | |
@@ -1962,6 +2001,10 @@ | |
}; | |
} | |
+ if (!base_focusable_elements) { | |
+ base_focusable_elements = $('a, input, button, select, textarea, iframe'); | |
+ } | |
+ | |
if ( $.support.fixedPosition === undefined ) { | |
$.support.fixedPosition = (function() { | |
var elem = $('<div style="position:fixed;top:20px;"></div>').appendTo('body'), |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment