From b4fb51199dcdaf08d959cfb8a6d5f5a6f8e76d75 Mon Sep 17 00:00:00 2001 From: Monika Piotrowicz Date: Sat, 7 Jun 2014 20:32:03 -0400 Subject: [PATCH] Tabs: Work around bad Safari/VoiceOver heuristics Move disabled tab click handlers from the container to the tablist to prevent panel contents from being announced as clickable. Fixes #10098 Closes gh-1261 --- ui/tabs.js | 42 +++++++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/ui/tabs.js b/ui/tabs.js index 2f1304e77..c45d6b3f6 100644 --- a/ui/tabs.js +++ b/ui/tabs.js @@ -75,24 +75,7 @@ return $.widget( "ui.tabs", { this.element .addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" ) - .toggleClass( "ui-tabs-collapsible", options.collapsible ) - // Prevent users from focusing disabled tabs via click - .delegate( ".ui-tabs-nav > li", "mousedown" + this.eventNamespace, function( event ) { - if ( $( this ).is( ".ui-state-disabled" ) ) { - event.preventDefault(); - } - }) - // support: IE <9 - // Preventing the default action in mousedown doesn't prevent IE - // from focusing the element, so if the anchor gets focused, blur. - // We don't have to worry about focusing the previously focused - // element since clicking on a non-focusable element should focus - // the body anyway. - .delegate( ".ui-tabs-anchor", "focus" + this.eventNamespace, function() { - if ( $( this ).closest( "li" ).is( ".ui-state-disabled" ) ) { - this.blur(); - } - }); + .toggleClass( "ui-tabs-collapsible", options.collapsible ); this._processTabs(); options.active = this._initialActive(); @@ -393,7 +376,26 @@ return $.widget( "ui.tabs", { this.tablist = this._getList() .addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ) - .attr( "role", "tablist" ); + .attr( "role", "tablist" ) + + // Prevent users from focusing disabled tabs via click + .delegate( "> li", "mousedown" + this.eventNamespace, function( event ) { + if ( $( this ).is( ".ui-state-disabled" ) ) { + event.preventDefault(); + } + }) + + // support: IE <9 + // Preventing the default action in mousedown doesn't prevent IE + // from focusing the element, so if the anchor gets focused, blur. + // We don't have to worry about focusing the previously focused + // element since clicking on a non-focusable element should focus + // the body anyway. + .delegate( ".ui-tabs-anchor", "focus" + this.eventNamespace, function() { + if ( $( this ).closest( "li" ).is( ".ui-state-disabled" ) ) { + this.blur(); + } + }); this.tabs = this.tablist.find( "> li:has(a[href])" ) .addClass( "ui-state-default ui-corner-top" ) @@ -711,6 +713,8 @@ return $.widget( "ui.tabs", { .removeAttr( "tabIndex" ) .removeUniqueId(); + this.tablist.unbind( this.eventNamespace ); + this.tabs.add( this.panels ).each(function() { if ( $.data( this, "ui-tabs-destroy" ) ) { $( this ).remove();