Skip to content

Commit

Permalink
Tooltip: Handle multiple aria-describedby values.
Browse files Browse the repository at this point in the history
  • Loading branch information
@scottgonzalez
scottgonzalez committed May 22, 2012
1 parent d7359be commit b6cc9dd
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 20 deletions.
1 change: 1 addition & 0 deletions tests/unit/tooltip/tooltip.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ <h2 id="qunit-userAgent"></h2>
<div> <div>
<a id="tooltipped1" href="#" title="anchortitle">anchor</a> <a id="tooltipped1" href="#" title="anchortitle">anchor</a>
<input title="inputtitle"> <input title="inputtitle">
<span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span>
<span id="fixture-span" title="title-text">span</span> <span id="fixture-span" title="title-text">span</span>
</div> </div>


Expand Down
20 changes: 16 additions & 4 deletions tests/unit/tooltip/tooltip_core.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -3,25 +3,37 @@
module( "tooltip: core" ); module( "tooltip: core" );


test( "markup structure", function() { test( "markup structure", function() {
expect( 6 ); expect( 7 );
var element = $( "#tooltipped1" ).tooltip(), var element = $( "#tooltipped1" ).tooltip(),
tooltip = $( ".ui-tooltip" ); tooltip = $( ".ui-tooltip" );


equal( element.attr( "aria-describedby" ), undefined, "no aria-describedby on init" ); equal( element.attr( "aria-describedby" ), undefined, "no aria-describedby on init" );
equal( tooltip.length, 0, "no tooltip on init" ); equal( tooltip.length, 0, "no tooltip on init" );


element.tooltip( "open" ); element.tooltip( "open" );
tooltip = $( "#" + element.attr( "aria-describedby" ) ); tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
equal( tooltip.length, 1, "tooltip exists" ); equal( tooltip.length, 1, "tooltip exists" );
equal( element.attr( "aria-describedby"), tooltip.attr( "id" ), "aria-describedby" );
ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" ); ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" );
equal( tooltip.length, 1, ".ui-tooltip exists" ); equal( tooltip.length, 1, ".ui-tooltip exists" );
equal( tooltip.find( ".ui-tooltip-content" ).length, 1, equal( tooltip.find( ".ui-tooltip-content" ).length, 1,
".ui-tooltip-content exists" ); ".ui-tooltip-content exists" );
}); });


test( "accessibility", function() { test( "accessibility", function() {
// TODO: add tests // TODO: full tests
expect( 0 ); expect( 2 );

var tooltipId,
element = $( "#multiple-describedby" ).tooltip();

element.tooltip( "open" );
tooltipId = element.data( "ui-tooltip-id" );
equal( element.attr( "aria-describedby" ), "fixture-span " + tooltipId,
"multiple describedby when open" );
element.tooltip( "close" );
equal( element.attr( "aria-describedby" ), "fixture-span",
"correct describedby when closed" );
}); });


}( jQuery ) ); }( jQuery ) );
2 changes: 1 addition & 1 deletion tests/unit/tooltip/tooltip_events.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ test( "programmatic triggers", function() {
tooltip = ui.tooltip; tooltip = ui.tooltip;
ok( !( "originalEvent" in event ), "open" ); ok( !( "originalEvent" in event ), "open" );
strictEqual( ui.tooltip[0], strictEqual( ui.tooltip[0],
$( "#" + element.attr( "aria-describedby" ) )[0], "ui.tooltip" ); $( "#" + element.data( "ui-tooltip-id" ) )[0], "ui.tooltip" );
}); });
element.tooltip( "open" ); element.tooltip( "open" );


Expand Down
6 changes: 3 additions & 3 deletions tests/unit/tooltip/tooltip_methods.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ test( "open/close", function() {
equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" );


element.tooltip( "open" ); element.tooltip( "open" );
tooltip = $( "#" + element.attr( "aria-describedby" ) ); tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
ok( tooltip.is( ":visible" ) ); ok( tooltip.is( ":visible" ) );


element.tooltip( "close" ); element.tooltip( "close" );
Expand All @@ -37,7 +37,7 @@ test( "enable/disable", function() {
equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" );


element.tooltip( "open" ); element.tooltip( "open" );
tooltip = $( "#" + element.attr( "aria-describedby" ) ); tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
ok( tooltip.is( ":visible" ) ); ok( tooltip.is( ":visible" ) );


element.tooltip( "disable" ); element.tooltip( "disable" );
Expand All @@ -51,7 +51,7 @@ test( "enable/disable", function() {
equal( element.attr( "title" ), "anchortitle", "title restored on enable" ); equal( element.attr( "title" ), "anchortitle", "title restored on enable" );


element.tooltip( "open" ); element.tooltip( "open" );
tooltip = $( "#" + element.attr( "aria-describedby" ) ); tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
ok( tooltip.is( ":visible" ) ); ok( tooltip.is( ":visible" ) );
$.fx.off = false; $.fx.off = false;
}); });
Expand Down
16 changes: 8 additions & 8 deletions tests/unit/tooltip/tooltip_options.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ module( "tooltip: options" );


test( "content: default", function() { test( "content: default", function() {
var element = $( "#tooltipped1" ).tooltip().tooltip( "open" ); var element = $( "#tooltipped1" ).tooltip().tooltip( "open" );
deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "anchortitle" ); deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "anchortitle" );
}); });


test( "content: return string", function() { test( "content: return string", function() {
Expand All @@ -13,7 +13,7 @@ test( "content: return string", function() {
return "customstring"; return "customstring";
} }
}).tooltip( "open" ); }).tooltip( "open" );
deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" ); deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" );
}); });


test( "content: return jQuery", function() { test( "content: return jQuery", function() {
Expand All @@ -22,19 +22,19 @@ test( "content: return jQuery", function() {
return $( "<div>" ).html( "cu<b>s</b>tomstring" ); return $( "<div>" ).html( "cu<b>s</b>tomstring" );
} }
}).tooltip( "open" ); }).tooltip( "open" );
deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" ); deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" );
}); });


asyncTest( "content: sync + async callback", function() { asyncTest( "content: sync + async callback", function() {
expect( 2 ); expect( 2 );
var element = $( "#tooltipped1" ).tooltip({ var element = $( "#tooltipped1" ).tooltip({
content: function( response ) { content: function( response ) {
setTimeout(function() { setTimeout(function() {
deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "loading..." ); deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "loading..." );


response( "customstring2" ); response( "customstring2" );
setTimeout(function() { setTimeout(function() {
deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "customstring2" ); deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "customstring2" );
start(); start();
}, 13 ); }, 13 );
}, 13 ); }, 13 );
Expand All @@ -53,12 +53,12 @@ test( "items", function() {
event = $.Event( "mouseenter" ); event = $.Event( "mouseenter" );
event.target = $( "#fixture-span" )[ 0 ]; event.target = $( "#fixture-span" )[ 0 ];
element.tooltip( "open", event ); element.tooltip( "open", event );
deepEqual( $( "#" + $( "#fixture-span" ).attr( "aria-describedby" ) ).text(), "title-text" ); deepEqual( $( "#" + $( "#fixture-span" ).data( "ui-tooltip-id" ) ).text(), "title-text" );


// make sure default [title] doesn't get used // make sure default [title] doesn't get used
event.target = $( "#tooltipped1" )[ 0 ]; event.target = $( "#tooltipped1" )[ 0 ];
element.tooltip( "open", event ); element.tooltip( "open", event );
deepEqual( $( "#tooltipped1" ).attr( "aria-describedby" ), undefined ); deepEqual( $( "#tooltipped1" ).data( "ui-tooltip-id" ), undefined );


element.tooltip( "destroy" ); element.tooltip( "destroy" );
}); });
Expand All @@ -68,7 +68,7 @@ test( "tooltipClass", function() {
var element = $( "#tooltipped1" ).tooltip({ var element = $( "#tooltipped1" ).tooltip({
tooltipClass: "custom" tooltipClass: "custom"
}).tooltip( "open" ); }).tooltip( "open" );
ok( $( "#" + element.attr( "aria-describedby" ) ).hasClass( "custom" ) ); ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) );
}); });


}( jQuery ) ); }( jQuery ) );
33 changes: 29 additions & 4 deletions ui/jquery.ui.tooltip.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -14,6 +14,31 @@


var increments = 0; 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: {
Expand Down Expand Up @@ -93,7 +118,7 @@ $.widget( "ui.tooltip", {
.closest( this.options.items ); .closest( this.options.items );


// if aria-describedby exists, then the tooltip is already open // if aria-describedby exists, then the tooltip is already open
if ( !target.length || target.attr( "aria-describedby" ) ) { if ( !target.length || target.data( "ui-tooltip-id" ) ) {
return; return;
} }


Expand Down Expand Up @@ -143,7 +168,7 @@ $.widget( "ui.tooltip", {
var tooltip = this._find( target ); var tooltip = this._find( target );
if ( !tooltip.length ) { if ( !tooltip.length ) {
tooltip = this._tooltip( target ); tooltip = this._tooltip( target );
target.attr( "aria-describedby", tooltip.attr( "id" ) ); addDescribedBy( target, tooltip.attr( "id" ) );
} }
tooltip.find( ".ui-tooltip-content" ).html( content ); tooltip.find( ".ui-tooltip-content" ).html( content );
tooltip tooltip
Expand Down Expand Up @@ -195,7 +220,7 @@ $.widget( "ui.tooltip", {
target.attr( "title", target.data( "ui-tooltip-title" ) ); target.attr( "title", target.data( "ui-tooltip-title" ) );
} }


target.removeAttr( "aria-describedby" ); removeDescribedBy( target );


tooltip.stop( true ); tooltip.stop( true );
this._hide( tooltip, this.options.hide, function() { this._hide( tooltip, this.options.hide, function() {
Expand Down Expand Up @@ -232,7 +257,7 @@ $.widget( "ui.tooltip", {
}, },


_find: function( target ) { _find: function( target ) {
var id = target.attr( "aria-describedby" ); var id = target.data( "ui-tooltip-id" );
return id ? $( "#" + id ) : $(); return id ? $( "#" + id ) : $();
}, },


Expand Down

0 comments on commit b6cc9dd

Please sign in to comment.