jenkins-bot has submitted this change and it was merged.
Change subject: jquery.tipsy: Improve accessibility slightly
......................................................................
jquery.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
Bug: T65960
Change-Id: Ib7746458e11e068e43cdc3c168751e81f9d9876e
---
M resources/src/jquery.tipsy/jquery.tipsy.js
1 file changed, 24 insertions(+), 6 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/jquery.tipsy/jquery.tipsy.js
b/resources/src/jquery.tipsy/jquery.tipsy.js
index 2a37fa8..29b7490 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', 'true' )
+ .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();
}
},
@@ -183,8 +201,8 @@
if (!options.live) this.each(function() { get(this); });
if ( options.trigger != 'manual' ) {
- var eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
- eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
+ var eventIn = options.trigger == 'hover' ? 'mouseenter focus' :
'focus',
+ eventOut = options.trigger == 'hover' ? 'mouseleave blur' :
'blur';
if ( options.live ) {
mw.track( 'mw.deprecate', 'tipsy-live' );
mw.log.warn( 'Use of the "live" option of jquery.tipsy is
deprecated.' );
--
To view, visit https://gerrit.wikimedia.org/r/134042
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib7746458e11e068e43cdc3c168751e81f9d9876e
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: TheDJ <hartman.w...@gmail.com>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net>
Gerrit-Reviewer: Jackmcbarn <jackmcb...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
