[MediaWiki-commits] [Gerrit] Tipsy: Improve accessibility slightly - change (mediawiki/core)

[TheDJ (Code Review)]

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