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

Already on GitHub? Sign in to your account

Add ARIA support (accessibility fix) #120

Open
wants to merge 3 commits into
from
Jump to file or symbol
Failed to load files and symbols.
+55 −14
Split
View
@@ -294,12 +294,37 @@ an anchor tag's title attribute.</p>
<div class='code'><pre>&lt;script type=&#x27;text/javascript&#x27;&gt;
$(&#x27;a.live-tipsy&#x27;).tipsy({live: true});
&lt;/script&gt;</pre></div>
+
+ <!-- ARIA attribute Support -->
+
+ <h3>Support for ARIA attributes</h3>
+
+ <p>
+ ARIA attributes are supported using the option <code>{aria: true}</code>.
+ The tooltip trigger must have a parent set to <code>role=&quot;application&quot;</code> or <code>role=&quot;document&quot;</code> and the tooltip should be enabled on focus (screen reader users are most likely to be using the keyboard).
+ </p>
+ <p>
+ The tooltip will be set to <code>role=&quot;tooltip&quot;</code> and the trigger will be linked to the tooltip with <code>aria-describedby</code> (using a generated ID).
+ </p>
+
+ <p role='application'><a id='aria-example' href='#' title='You should hear this text in screen readers'>Tooltip with ARIA</a></p>
+
+ <div class='caption'>Aria example:</div>
+ <div class='code'><pre>$('#aria-example').tipsy({aria: true});</pre></div>
+
+ <script type='text/javascript'>
+ $(function() {
+ $("#aria-example").tipsy({trigger: "focus", aria: true});
+ $("#aria-example").tipsy({trigger: "hover", aria: true});
+ });
+ </script>
<!-- Options -->
<h2 id="options">Summary of Configuration Options</h2>
<p>Here is the default options declaration:
<div class='code'><pre>$.fn.tipsy.defaults = {
+ aria: false, // add ARIA attributes? (note dependencies)
className: null, // custom class to add to tooltip (string or function)
delayIn: 0, // delay before showing tooltip (ms)
delayOut: 0, // delay before hiding tooltip (ms)
@@ -15,6 +15,12 @@
}
return false;
};
+
+ var tipsyIDcounter = 0;
+ function tipsyID() {
+ var tipsyID = tipsyIDcounter++;
+ return "tipsyuid" + tipsyID;
+ };
function Tipsy(element, options) {
this.$element = $(element);
@@ -77,6 +83,12 @@
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}
+
+ if (this.options.aria) {
+ var $tipID = tipsyID();
+ $tip.attr("id", $tipID);
+ this.$element.attr("aria-describedby", $tipID);
+ }
}
},
@@ -86,6 +98,9 @@
} else {
this.tip().remove();
}
+ if (this.options.aria) {
+ this.$element.removeAttr("aria-describedby");
+ }
},
fixTitle: function() {
@@ -110,7 +125,7 @@
tip: function() {
if (!this.$tip) {
- this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
+ this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>').attr("role","tooltip");
this.$tip.data('tipsy-pointee', this.$element[0]);
}
return this.$tip;
@@ -185,6 +200,7 @@
};
$.fn.tipsy.defaults = {
+ aria: false,
className: null,
delayIn: 0,
delayOut: 0,
@@ -240,19 +256,19 @@
* component.
*/
$.fn.tipsy.autoBounds = function(margin, prefer) {
- return function() {
- var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
- boundTop = $(document).scrollTop() + margin,
- boundLeft = $(document).scrollLeft() + margin,
- $this = $(this);
+ return function() {
+ var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
+ boundTop = $(document).scrollTop() + margin,
+ boundLeft = $(document).scrollLeft() + margin,
+ $this = $(this);
- if ($this.offset().top < boundTop) dir.ns = 'n';
- if ($this.offset().left < boundLeft) dir.ew = 'w';
- if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
- if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
+ if ($this.offset().top < boundTop) dir.ns = 'n';
+ if ($this.offset().left < boundLeft) dir.ew = 'w';
+ if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
+ if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
- return dir.ns + (dir.ew ? dir.ew : '');
- }
- };
+ return dir.ns + (dir.ew ? dir.ew : '');
+ }
+ };
-})(jQuery);
+})(jQuery);