From e767f9397990c9db4aeaaa615dcbeed2e84ae5b4 Mon Sep 17 00:00:00 2001 From: Monika Piotrowicz Date: Sat, 7 Jun 2014 20:32:03 -0400 Subject: [PATCH 1/2] #10098 moving disabled tab click handlers onto role=tabpanel elements for better Voiceover announcement --- ui/tabs.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/ui/tabs.js b/ui/tabs.js index 2f1304e7701..0c2d807865d 100644 --- a/ui/tabs.js +++ b/ui/tabs.js @@ -76,23 +76,26 @@ 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(); - } - }); + + // bind events to ul for better Voiceover announcement + .find(".ui-tabs-nav") + // 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._processTabs(); options.active = this._initialActive(); From d74ea638390c3beae145854bbb85186b3ce11d33 Mon Sep 17 00:00:00 2001 From: Monika Piotrowicz Date: Sun, 15 Jun 2014 10:40:08 -0400 Subject: [PATCH 2/2] Tabs: all content announced as clickable in VO moving tab list event bindings for disabled li's from selector onto this.tablist inside of processTabs(). Adding an unbind call on tab list in destroy() for cleanup --- ui/tabs.js | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/ui/tabs.js b/ui/tabs.js index 0c2d807865d..c809841e673 100644 --- a/ui/tabs.js +++ b/ui/tabs.js @@ -75,27 +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 ) - - // bind events to ul for better Voiceover announcement - .find(".ui-tabs-nav") - // 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(); - } - }); + .toggleClass( "ui-tabs-collapsible", options.collapsible ); this._processTabs(); options.active = this._initialActive(); @@ -396,7 +376,24 @@ 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" ) @@ -714,6 +711,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();