Tooltip: Use .uniqueId() and move aria-describedby helper methods into the widget prototype.

This commit is contained in:
Scott González 2013-09-17 10:26:48 -04:00
parent ecd4f95a50
commit f64c953497

View File

@ -15,33 +15,6 @@
*/ */
(function( $ ) { (function( $ ) {
var increments = 0;
function addDescribedBy( elem, id ) {
var describedby = (elem.attr( "aria-describedby" ) || "").split( /\s+/ );
describedby.push( id );
elem
.data( "ui-tooltip-id", id )
.attr( "aria-describedby", $.trim( describedby.join( " " ) ) );
}
function removeDescribedBy( elem ) {
var id = elem.data( "ui-tooltip-id" ),
describedby = (elem.attr( "aria-describedby" ) || "").split( /\s+/ ),
index = $.inArray( id, describedby );
if ( index !== -1 ) {
describedby.splice( index, 1 );
}
elem.removeData( "ui-tooltip-id" );
describedby = $.trim( describedby.join( " " ) );
if ( describedby ) {
elem.attr( "aria-describedby", describedby );
} else {
elem.removeAttr( "aria-describedby" );
}
}
$.widget( "ui.tooltip", { $.widget( "ui.tooltip", {
version: "@VERSION", version: "@VERSION",
options: { options: {
@ -69,6 +42,32 @@ $.widget( "ui.tooltip", {
open: null open: null
}, },
_addDescribedBy: function( elem, id ) {
var describedby = (elem.attr( "aria-describedby" ) || "").split( /\s+/ );
describedby.push( id );
elem
.data( "ui-tooltip-id", id )
.attr( "aria-describedby", $.trim( describedby.join( " " ) ) );
},
_removeDescribedBy: function( elem ) {
var id = elem.data( "ui-tooltip-id" ),
describedby = (elem.attr( "aria-describedby" ) || "").split( /\s+/ ),
index = $.inArray( id, describedby );
if ( index !== -1 ) {
describedby.splice( index, 1 );
}
elem.removeData( "ui-tooltip-id" );
describedby = $.trim( describedby.join( " " ) );
if ( describedby ) {
elem.attr( "aria-describedby", describedby );
} else {
elem.removeAttr( "aria-describedby" );
}
},
_create: function() { _create: function() {
this._on({ this._on({
mouseover: "open", mouseover: "open",
@ -243,7 +242,7 @@ $.widget( "ui.tooltip", {
} }
tooltip = this._tooltip( target ); tooltip = this._tooltip( target );
addDescribedBy( target, tooltip.attr( "id" ) ); this._addDescribedBy( target, tooltip.attr( "id" ) );
tooltip.find( ".ui-tooltip-content" ).html( content ); tooltip.find( ".ui-tooltip-content" ).html( content );
function position( event ) { function position( event ) {
@ -322,7 +321,7 @@ $.widget( "ui.tooltip", {
target.attr( "title", target.data( "ui-tooltip-title" ) ); target.attr( "title", target.data( "ui-tooltip-title" ) );
} }
removeDescribedBy( target ); this._removeDescribedBy( target );
tooltip.stop( true ); tooltip.stop( true );
this._hide( tooltip, this.options.hide, function() { this._hide( tooltip, this.options.hide, function() {
@ -350,17 +349,16 @@ $.widget( "ui.tooltip", {
}, },
_tooltip: function( element ) { _tooltip: function( element ) {
var id = "ui-tooltip-" + increments++, var tooltip = $( "<div>" )
tooltip = $( "<div>" ) .attr( "role", "tooltip" )
.attr({
id: id,
role: "tooltip"
})
.addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " + .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " +
( this.options.tooltipClass || "" ) ); ( this.options.tooltipClass || "" ) ),
id = tooltip.uniqueId().attr( "id" );
$( "<div>" ) $( "<div>" )
.addClass( "ui-tooltip-content" ) .addClass( "ui-tooltip-content" )
.appendTo( tooltip ); .appendTo( tooltip );
tooltip.appendTo( this.document[0].body ); tooltip.appendTo( this.document[0].body );
this.tooltips[ id ] = element; this.tooltips[ id ] = element;
return tooltip; return tooltip;