Skip to content
Permalink
Browse files

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
  • Loading branch information
mpiotrowicz authored and scottgonzalez committed Jul 16, 2014
1 parent 98583a6 commit b4fb51199dcdaf08d959cfb8a6d5f5a6f8e76d75
Showing with 23 additions and 19 deletions.
  1. +23 −19 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();

0 comments on commit b4fb511

Please sign in to comment.
You can’t perform that action at this time.