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

diff --git a/ui/tabs.js b/ui/tabs.js
index 2f1304e7701deb7b470f44c5b77e11a848be58cc..c45d6b3f6f7e138c7700a219466bf4b042caa25a 100644 (file)
--- 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();