r3294 committed - tooltip: aria based on http://test.cita.illinois.edu/aria/tooltip/tool...
Revision: 3294
Author: joern.zaefferer
Date: Thu Sep 24 13:02:36 2009
Log: tooltip: aria based on
http://test.cita.illinois.edu/aria/tooltip/tooltip1.php
http://code.google.com/p/jquery-ui/source/detail?r=3294
Modified:
/branches/dev/tests/visual/tooltip/default.html
/branches/dev/ui/jquery.ui.tooltip.js
=======================================
--- /branches/dev/tests/visual/tooltip/default.html Wed Sep 23 14:03:09 2009
+++ /branches/dev/tests/visual/tooltip/default.html Thu Sep 24 13:02:36 2009
@@ -19,7 +19,7 @@
function enable() {
// default
- $("#context1").tooltip();
+ $("#context1, form").tooltip();
// custom class, replaces ui-widget-content
$("#context2").tooltip({
@@ -103,6 +103,17 @@
</div>
</div>
+ <form style="margin: 2em 0;">
+ <div>
+ <label for="first">First Name:</label>
+ <input id="first" title="Your first name is optional" />
+ </div>
+ <div>
+ <label for="last">Last Name:</label>
+ <input id="last" title="Your last name is optional" />
+ </div>
+ </form>
+
<div id="footnote">This is <strong>the</strong> footnote, including other
elements</div>
<button id="disable">Toggle disabled</button>
=======================================
--- /branches/dev/ui/jquery.ui.tooltip.js Wed Sep 23 14:03:09 2009
+++ /branches/dev/ui/jquery.ui.tooltip.js Thu Sep 24 13:02:36 2009
@@ -13,16 +13,18 @@
*/
(function($) {
+var increments = 0;
+
$.widget("ui.tooltip", {
_init: function() {
var self = this;
- this.tooltip = $("<div/>").addClass("ui-tooltip ui-widget
ui-corner-all").addClass(this.options.tooltipClass).appendTo(document.body).hide();
+ this.tooltip = $("<div/>").attr("id", "uitooltip" +
increments++).attr("role", "tooltip").attr("aria-hidden", "true").addClass("ui-tooltip
ui-widget
ui-corner-all").addClass(this.options.tooltipClass).appendTo(document.body).hide();
this.opacity = this.tooltip.css("opacity");
this.element
- .bind("mouseover.tooltip", function(event) {
+ .bind("focus.tooltip mouseover.tooltip", function(event) {
self.show($(event.target));
})
- .bind("mouseout.tooltip", function(event) {
+ .bind("blur.tooltip mouseout.tooltip", function(event) {
self.close();
});
},
@@ -56,6 +58,9 @@
of: target
}));
+ this.tooltip.attr("aria-hidden", "false");
+ target.attr("role", "describedby-" + this.tooltip.attr("id"));
+
if (this.tooltip.is(":animated"))
this.tooltip.stop().show().fadeTo("normal", this.opacity);
else
@@ -66,6 +71,9 @@
if (!this.current)
return;
+ this.current.removeAttr("role");
+ this.tooltip.attr("aria-hidden", "true");
+
if (this.tooltip.is(':animated'))
this.tooltip.stop().fadeTo("normal", 0);
else