TheDJ has uploaded a new change for review.
https://gerrit.wikimedia.org/r/134042
Change subject: Tipsy: Improve accessibility slightly
......................................................................
Tipsy: Improve accessibility slightly
- use role tooltip
- use aria-hidden when element is hidden
- use focus and blur in case of trigger:hover as well
Change-Id: Ib7746458e11e068e43cdc3c168751e81f9d9876e
---
M resources/src/jquery.tipsy/jquery.tipsy.js
1 file changed, 24 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/42/134042/1
diff --git a/resources/src/jquery.tipsy/jquery.tipsy.js
b/resources/src/jquery.tipsy/jquery.tipsy.js
index 58a99a5..15a405c 100644
--- a/resources/src/jquery.tipsy/jquery.tipsy.js
+++ b/resources/src/jquery.tipsy/jquery.tipsy.js
@@ -16,6 +16,7 @@
this.$element = $(element);
this.options = options;
this.enabled = true;
+ this.keyHandler = $.proxy( this.closeOnEsc, this );
this.fixTitle();
}
@@ -30,7 +31,10 @@
if (this.options.className) {
$tip.addClass(maybeCall(this.options.className,
this.$element[0]));
}
- $tip.remove().css({top: 0, left: 0, visibility: 'hidden',
display: 'block'}).appendTo(document.body);
+ $tip.remove()
+ .css({top: 0, left: 0, visibility: 'hidden', display:
'block'})
+ .attr( 'aria-hidden', 'false' )
+ .appendTo(document.body);
var pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth,
@@ -82,15 +86,22 @@
}
$tip.css(tp);
+ $( document ).on( 'keydown', this.keyHandler );
if (this.options.fade) {
- $tip.stop().css({opacity: 0, display: 'block', visibility:
'visible'}).animate({opacity: this.options.opacity}, 100);
+ $tip.stop()
+ .css({opacity: 0, display: 'block', visibility:
'visible'})
+ .attr( 'aria-hidden', 'false' )
+ .animate({opacity: this.options.opacity}, 100);
} else {
- $tip.css({visibility: 'visible', opacity:
this.options.opacity});
+ $tip
+ .css({visibility: 'visible', opacity:
this.options.opacity})
+ .attr( 'aria-hidden', 'false' );
}
}
},
hide: function() {
+ $( document ).off( 'keydown', this.keyHandler );
if (this.options.fade) {
this.tip().stop().fadeOut(100, function() { $(this).remove();
});
} else {
@@ -120,7 +131,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"
role="tooltip"></div>').html('<div class="tipsy-arrow"></div><div
class="tipsy-inner"></div>');
}
return this.$tip;
},
@@ -130,6 +141,13 @@
this.hide();
this.$element = null;
this.options = null;
+ }
+ },
+
+ // $.proxy event handler
+ closeOnEsc: function ( e ) {
+ if ( e.keyCode === 27 ) {
+ this.hide();
}
},
@@ -184,8 +202,8 @@
if (options.trigger != 'manual') {
var binder = options.live ? 'live' : 'bind',
- eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
- eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
+ eventIn = options.trigger == 'hover' ? 'mouseenter focus' :
'focus',
+ eventOut = options.trigger == 'hover' ? 'mouseleave blur' :
'blur';
this[binder](eventIn, enter)[binder](eventOut, leave);
}
--
To view, visit https://gerrit.wikimedia.org/r/134042
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib7746458e11e068e43cdc3c168751e81f9d9876e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <hartman.w...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
