Skip to content

Tooltip: Add tooltip content to an aria-live div when the tooltip conten... #1118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dylanb wants to merge 1 commit into from
Closed

Tooltip: Add tooltip content to an aria-live div when the tooltip conten... #1118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions tests/unit/tooltip/tooltip_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@ test( "markup structure", function() {
});

test( "accessibility", function() {
expect( 5 );
expect( 15 );

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

element = $( "#multiple-describedby" ).tooltip(),
liveRegion = element.tooltip( "instance" ).liveRegion,
announced = 0;

equal( liveRegion.find( ">div" ).length, 0 );
equal( liveRegion.attr( "role" ), "log" );
equal( liveRegion.attr( "aria-live" ), "assertive" );
equal( liveRegion.attr( "aria-relevant" ), "additions" );
element.tooltip( "open" );
tooltipId = element.data( "ui-tooltip-id" );
tooltip = $( "#" + tooltipId );
Expand All @@ -38,10 +44,25 @@ test( "accessibility", function() {
// support: IE <8
// We should use strictEqual( ..., undefined ) when dropping jQuery 1.6.1 support (or IE6/7)
ok( !element.attr( "title" ), "no title when open" );
equal( liveRegion.children().length, announced + 1 );
equal( liveRegion.children().last().html(), "..." );
element.tooltip( "close" );
equal( element.attr( "aria-describedby" ), "fixture-span",
"correct describedby when closed" );
equal( element.attr( "title" ), "...", "title restored when closed" );

// Additional announcement tests
element.tooltip( "open" );
equal( liveRegion.children().length, announced + 2,
"After the second tooltip show, there should be two children" );
equal( liveRegion.children().filter( ":visible" ).length, 1,
"Only one of the children should be visible" );
ok( liveRegion.children().last().is( ":visible" ),
"Only the last child should be visible" );
element.tooltip( "close" );
element.tooltip( "destroy" );
equal( liveRegion.parent().length, 0,
"Tooltip liveregion element should be detached from the body" );
});

test( "delegated removal", function() {
Expand Down
9 changes: 6 additions & 3 deletions tests/unit/tooltip/tooltip_options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,16 @@ test( "content: return string", function() {
});

test( "content: return jQuery", function() {
expect( 1 );
expect( 2 );
var element = $( "#tooltipped1" ).tooltip({
content: function() {
return $( "<div>" ).html( "cu<b>s</b>tomstring" );
return $( "<div id='unique'>" ).html( "cu<b id='bold'>s</b>tomstring" );
}
}).tooltip( "open" );
}).tooltip( "open" ),
liveRegion = element.tooltip( "instance" ).liveRegion;
deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" );
equal( liveRegion.children().last().html(), "<div>cu<b>s</b>tomstring</div>",
"The accessibility live region will strip the ids but keep the structure" );
});

asyncTest( "content: sync + async callback", function() {
Expand Down
25 changes: 24 additions & 1 deletion ui/jquery.ui.tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,16 @@ $.widget( "ui.tooltip", {
if ( this.options.disabled ) {
this._disable();
}

// Append the aria-live region so tooltips announce correctly
this.liveRegion = $( "<div>" )
.attr({
role: "log",
"aria-live": "assertive",
"aria-relevant": "additions"
})
.addClass( "ui-helper-hidden-accessible" )
.appendTo( this.document[ 0 ].body );
},

_setOption: function( key, value ) {
Expand Down Expand Up @@ -211,7 +221,7 @@ $.widget( "ui.tooltip", {
},

_open: function( event, target, content ) {
var tooltip, events, delayedShow,
var tooltip, events, delayedShow, a11yContent,
positionOption = $.extend( {}, this.options.position );

if ( !content ) {
Expand Down Expand Up @@ -245,6 +255,18 @@ $.widget( "ui.tooltip", {
this._addDescribedBy( target, tooltip.attr( "id" ) );
tooltip.find( ".ui-tooltip-content" ).html( content );

// Support: Voiceover on OS X, JAWS on IE <= 9
// JAWS announces deletions even when aria-relevant="additions"
// Voiceover will sometimes re-read the entire log region's contents from the beginning
this.liveRegion.children().hide();
if ( content.clone ) {
a11yContent = content.clone();
a11yContent.removeAttr( "id" ).find( "[id]" ).removeAttr( "id" );
} else {
a11yContent = content;
}
$( "<div>" ).html( a11yContent ).appendTo( this.liveRegion );

function position( event ) {
positionOption.of = event;
if ( tooltip.is( ":hidden" ) ) {
Expand Down Expand Up @@ -394,6 +416,7 @@ $.widget( "ui.tooltip", {
element.removeData( "ui-tooltip-title" );
}
});
this.liveRegion.remove();
Copy link
Member

@scottgonzalez scottgonzalez Dec 4, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add a test to verify this is removed on destroy. On a related note, we need to do the same for autocomplete, but I'd like to do a full review of autocomplete's live region, since it probably needs to change to this same implementation.

Copy link
Contributor Author

@dylanb dylanb Dec 8, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed this but had to introduce the ui-tooltip-liveregion class in order to look for the element in the test. If you now of a better way to do this...

Copy link
Member

@scottgonzalez scottgonzalez Dec 10, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just check if the live region has a parent.

Copy link
Contributor Author

@dylanb dylanb Dec 11, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, done

}
});

Expand Down