Skip to content
Browse files

Add an ID option for WAI-ARIA's describedby, and by default on when a…

…n ID is supplied.
  • Loading branch information...
1 parent cdac68e commit 2b42c2615a40a41e20b54d01b61d68bfec1147be @timwienk timwienk committed Jun 6, 2011
Showing with 21 additions and 9 deletions.
  1. +2 −1 Docs/Interface/Tips.md
  2. +19 −8 Source/Interface/Tips.js
View
3 Docs/Interface/Tips.md
@@ -36,7 +36,8 @@ Tips Method: constructor
* offset - (*object*: defaults to {'x': 16, 'y': 16}) The distance of your tooltip from the mouse.
* fixed - (*boolean*: defaults to false) If set to true, the toolTip will not follow the mouse.
* windowPadding - (*object*; defaults to {'x':0, 'y': 0}) Allows you to reduce or expand the virtual size of the window for tip positioning. The tips will not be allowed to approach the edge of the window on any side based on this offset.
-* waiAria - (*boolean*: defaults to *false*) Enable [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php) support. Adds aria-attributes to the Tip.
+* id - (*string*: defaults to null) Add an `id` to the Tip container, required for WAI-ARIA support.
+* waiAria - (*boolean*: defaults to *true*) Requires the `id` option to be set. Enable [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php) support. Adds aria-attributes to the Tip.
### Events
View
27 Source/Interface/Tips.js
@@ -38,6 +38,7 @@ this.Tips = new Class({
Implements: [Events, Options],
options: {/*
+ id: null,
onAttach: function(element){},
onDetach: function(element){},
onBound: function(coords){},*/
@@ -57,7 +58,7 @@ this.Tips = new Class({
offset: {x: 16, y: 16},
windowPadding: {x:0, y:0},
fixed: false,
- waiAria: false
+ waiAria: true
},
initialize: function(){
@@ -69,9 +70,12 @@ this.Tips = new Class({
});
this.setOptions(params.options);
if (params.elements) this.attach(params.elements);
- this.container = new Element('div', {'class': 'tip', 'id': 'tip', role: 'tooltip'});
+ this.container = new Element('div', {'class': 'tip'});
- if (this.options.waiAria) this.attachWaiAriaEvents();
+ if (this.options.id){
+ this.container.set('id', this.options.id);
+ if (this.options.waiAria) this.attachWaiAria();
+ }
},
toElement: function(){
@@ -93,24 +97,31 @@ this.Tips = new Class({
return this.tip;
},
- attachWaiAriaEvents: function(){
+ attachWaiAria: function(){
+ var id = this.options.id;
+ this.container.set('role', 'tooltip');
+
if (!this.waiAria){
this.waiAria = {
show: function(element){
- element.set('aria-describedby', 'tip');
+ if (id) element.set('aria-describedby', id);
this.container.set('aria-hidden', 'false');
},
hide: function(element){
- element.erase('aria-describedby');
+ if (id) element.erase('aria-describedby');
this.container.set('aria-hidden', 'true');
}
};
}
this.addEvents(this.waiAria);
},
- detachWaiAriaEvents: function(){
- if (this.waiAria) this.removeEvents(this.waiAria);
+ detachWaiAria: function(){
+ if (this.waiAria){
+ this.container.erase('role');
+ this.container.erase('aria-hidden');
+ this.removeEvents(this.waiAria);
+ }
},
attach: function(elements){

0 comments on commit 2b42c26

Please sign in to comment.
Something went wrong with that request. Please try again.