From: Marius Olbertz Date: Sun, 4 Oct 2015 01:31:32 +0000 (+0200) Subject: Added accessibility to tabs. See issue 6888. X-Git-Tag: v5.5.3~11^2 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F6914%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Added accessibility to tabs. See issue 6888. --- diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js index c8a8bbf9c..fb0f17225 100644 --- a/js/foundation/foundation.tab.js +++ b/js/foundation/foundation.tab.js @@ -17,7 +17,7 @@ default_tab_hashes : [], init : function (scope, method, options) { - var self = this, + var self = this, S = this.S; // Store the default active tabs which will be referenced when the @@ -38,9 +38,14 @@ var usual_tab_behavior = function (e, target) { var settings = S(target).closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init'); if (!settings.is_hover || Modernizr.touch) { - e.preventDefault(); - e.stopPropagation(); + // if user did not pressed tab key, prevent default action + var keyCode = e.keyCode || e.which; + if (keyCode !== 9) { + e.preventDefault(); + e.stopPropagation(); + } self.toggle_active_tab(S(target).parent()); + } }; @@ -48,14 +53,12 @@ .off('.tab') // Key event: focus/tab key .on('keydown.fndtn.tab', '[' + this.attr_name() + '] > * > a', function(e) { - var el = this; var keyCode = e.keyCode || e.which; - // if user pressed tab key - if (keyCode == 9) { - e.preventDefault(); - // TODO: Change usual_tab_behavior into accessibility function? - usual_tab_behavior(e, el); - } + // if user pressed tab key + if (keyCode === 13 || keyCode === 32) { // enter or space + var el = this; + usual_tab_behavior(e, el); + } }) // Click event: tab title .on('click.fndtn.tab', '[' + this.attr_name() + '] > * > a', function(e) { @@ -219,8 +222,8 @@ tab.addClass(settings.active_class).triggerHandler('opened'); tab_link.attr({'aria-selected' : 'true', tabindex : 0}); siblings.removeClass(settings.active_class) - siblings.find('a').attr({'aria-selected' : 'false', tabindex : -1}); - target.siblings().removeClass(settings.active_class).attr({'aria-hidden' : 'true', tabindex : -1}); + siblings.find('a').attr({'aria-selected' : 'false'/*, tabindex : -1*/}); + target.siblings().removeClass(settings.active_class).attr({'aria-hidden' : 'true'/*, tabindex : -1*/}); target.addClass(settings.active_class).attr('aria-hidden', 'false').removeAttr('tabindex'); settings.callback(tab); target.triggerHandler('toggled', [target]);