Tooltip: Handle multiple aria-describedby values.

diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html
index d20ba857889cdd0cf7df2a96d24d27dd6000dcd8..f6e60b367353e9b5e827d1766d98d447410b7dc4 100644 (file)
--- a/tests/unit/tooltip/tooltip.html
+++ b/tests/unit/tooltip/tooltip.html
@@ -41,6 +41,7 @@
 <div>
        <a id="tooltipped1" href="#" title="anchortitle">anchor</a>
        <input title="inputtitle">
+       <span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span>
        <span id="fixture-span" title="title-text">span</span>
 </div>
 

diff --git a/tests/unit/tooltip/tooltip_core.js b/tests/unit/tooltip/tooltip_core.js
index e2569fb0196d57f64575245628e837a597b8f439..e25eb3c13ddeabb862f0a0b2c496afa3f4d42608 100644 (file)
--- a/tests/unit/tooltip/tooltip_core.js
+++ b/tests/unit/tooltip/tooltip_core.js
@@ -3,7 +3,7 @@
 module( "tooltip: core" );
 
 test( "markup structure", function() {
-       expect( 6 );
+       expect( 7 );
        var element = $( "#tooltipped1" ).tooltip(),
                tooltip = $( ".ui-tooltip" );
 
@@ -11,8 +11,9 @@ test( "markup structure", function() {
        equal( tooltip.length, 0, "no tooltip on init" );
 
        element.tooltip( "open" );
-       tooltip = $( "#" + element.attr( "aria-describedby" ) );
+       tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
        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" );
        equal( tooltip.length, 1, ".ui-tooltip exists" );
        equal( tooltip.find( ".ui-tooltip-content" ).length, 1,
@@ -20,8 +21,19 @@ test( "markup structure", function() {
 });
 
 test( "accessibility", function() {
-       // TODO: add tests
-       expect( 0 );
+       // TODO: full tests
+       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 ) );

diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js
index b1ce92fb2d50cf1c888953cb5c514125ae513cfd..fc5f1acc5c22e95d4b5e09dc21df832755c5c0c0 100644 (file)
--- a/tests/unit/tooltip/tooltip_events.js
+++ b/tests/unit/tooltip/tooltip_events.js
@@ -11,7 +11,7 @@ test( "programmatic triggers", function() {
                tooltip = ui.tooltip;
                ok( !( "originalEvent" in event ), "open" );
                strictEqual( ui.tooltip[0],
-                       $( "#" + element.attr( "aria-describedby" ) )[0], "ui.tooltip" );
+                       $( "#" + element.data( "ui-tooltip-id" ) )[0], "ui.tooltip" );
        });
        element.tooltip( "open" );
 

diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js
index eaab1c0d188ee88a2d70e85c155e3a2bb8b2d1b5..1b8cd2bf20c299c18624583956114e9dfcc57580 100644 (file)
--- a/tests/unit/tooltip/tooltip_methods.js
+++ b/tests/unit/tooltip/tooltip_methods.js
@@ -21,7 +21,7 @@ test( "open/close", function() {
        equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" );
 
        element.tooltip( "open" );
-       tooltip = $( "#" + element.attr( "aria-describedby" ) );
+       tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
        ok( tooltip.is( ":visible" ) );
 
        element.tooltip( "close" );
@@ -37,7 +37,7 @@ test( "enable/disable", function() {
        equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" );
 
        element.tooltip( "open" );
-       tooltip = $( "#" + element.attr( "aria-describedby" ) );
+       tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
        ok( tooltip.is( ":visible" ) );
 
        element.tooltip( "disable" );
@@ -51,7 +51,7 @@ test( "enable/disable", function() {
        equal( element.attr( "title" ), "anchortitle", "title restored on enable" );
 
        element.tooltip( "open" );
-       tooltip = $( "#" + element.attr( "aria-describedby" ) );
+       tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
        ok( tooltip.is( ":visible" ) );
        $.fx.off = false;
 });

diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js
index 4f994f8de907ee61ef700ec31bc49c702bf498d3..a4ef9f472da584c7d457272009954e57bc976f28 100644 (file)
--- a/tests/unit/tooltip/tooltip_options.js
+++ b/tests/unit/tooltip/tooltip_options.js
@@ -4,7 +4,7 @@ module( "tooltip: options" );
 
 test( "content: default", function() {
        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() {
@@ -13,7 +13,7 @@ test( "content: return string", function() {
                        return "customstring";
                }
        }).tooltip( "open" );
-       deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" );
+       deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" );
 });
 
 test( "content: return jQuery", function() {
@@ -22,7 +22,7 @@ test( "content: return jQuery", function() {
                        return $( "<div>" ).html( "cu<b>s</b>tomstring" );
                }
        }).tooltip( "open" );
-       deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" );
+       deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" );
 });
 
 asyncTest( "content: sync + async callback", function() {
@@ -30,11 +30,11 @@ asyncTest( "content: sync + async callback", function() {
        var element = $( "#tooltipped1" ).tooltip({
                content: function( response ) {
                        setTimeout(function() {
-                               deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "loading..." );
+                               deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "loading..." );
 
                                response( "customstring2" );
                                setTimeout(function() {
-                                       deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "customstring2" );
+                                       deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "customstring2" );
                                        start();
                                }, 13 );
                        }, 13 );
@@ -53,12 +53,12 @@ test( "items", function() {
        event = $.Event( "mouseenter" );
        event.target = $( "#fixture-span" )[ 0 ];
        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
        event.target = $( "#tooltipped1" )[ 0 ];
        element.tooltip( "open", event );
-       deepEqual( $( "#tooltipped1" ).attr( "aria-describedby" ), undefined );
+       deepEqual( $( "#tooltipped1" ).data( "ui-tooltip-id" ), undefined );
 
        element.tooltip( "destroy" );
 });
@@ -68,7 +68,7 @@ test( "tooltipClass", function() {
        var element = $( "#tooltipped1" ).tooltip({
                tooltipClass: "custom"
        }).tooltip( "open" );
-       ok( $( "#" + element.attr( "aria-describedby" ) ).hasClass( "custom" ) );
+       ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) );
 });
 
 }( jQuery ) );

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js
index 47a377bfd0a65e0dcb9e184fde1980cd46bb5257..1d6cd32a89e5aae65689e69403a56c4d356eba98 100644 (file)
--- a/ui/jquery.ui.tooltip.js
+++ b/ui/jquery.ui.tooltip.js
@@ -14,6 +14,31 @@
 
 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", {
        version: "@VERSION",
        options: {
@@ -93,7 +118,7 @@ $.widget( "ui.tooltip", {
                                .closest( this.options.items );
 
                // 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;
                }
 
@@ -143,7 +168,7 @@ $.widget( "ui.tooltip", {
                var tooltip = this._find( target );
                if ( !tooltip.length ) {
                        tooltip = this._tooltip( target );
-                       target.attr( "aria-describedby", tooltip.attr( "id" ) );
+                       addDescribedBy( target, tooltip.attr( "id" ) );
                }
                tooltip.find( ".ui-tooltip-content" ).html( content );
                tooltip
@@ -195,7 +220,7 @@ $.widget( "ui.tooltip", {
                        target.attr( "title", target.data( "ui-tooltip-title" ) );
                }
 
-               target.removeAttr( "aria-describedby" );
+               removeDescribedBy( target );
 
                tooltip.stop( true );
                this._hide( tooltip, this.options.hide, function() {
@@ -232,7 +257,7 @@ $.widget( "ui.tooltip", {
        },
 
        _find: function( target ) {
-               var id = target.attr( "aria-describedby" );
+               var id = target.data( "ui-tooltip-id" );
                return id ? $( "#" + id ) : $();
        },