Skip to content

Instantly share code, notes, and snippets.

@etienned
Created March 22, 2013 03:51
Show Gist options
  • Save etienned/5218834 to your computer and use it in GitHub Desktop.
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
# 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