Henning Snater has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/64265


Change subject: (bug 48145) input extender widget: Tabbing into/out of extension
......................................................................

(bug 48145) input extender widget: Tabbing into/out of extension

Change-Id: Ib32351a35cbf78d84c8561ce3bb026995dbeaae2
---
M ValueView/resources/jquery.ui/jquery.ui.inputextender.js
1 file changed, 30 insertions(+), 1 deletion(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/DataValues 
refs/changes/65/64265/1

diff --git a/ValueView/resources/jquery.ui/jquery.ui.inputextender.js 
b/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
index 363a9c0..f1d79f2 100644
--- a/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
+++ b/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
@@ -93,6 +93,27 @@
                        .on( 'toggleranimationstep.' + this.widgetName, 
function( event, now, tween ) {
                                self._trigger( 'animationstep', null, [ now, 
tween ] );
                        } )
+                       .on( 'keydown.' + this.widgetName, function( event ) {
+                               if( event.keyCode === $.ui.keyCode.TAB ) {
+                                       var $focusable = self.$extension.find( 
':focusable' );
+                                       if( event.target === 
$focusable.first()[0] && event.shiftKey ) {
+                                               event.preventDefault();
+                                               // Tab back to the input 
element:
+                                               self.element.focus();
+                                       } else if ( event.target === 
$focusable.last()[0] && !event.shiftKey ) {
+                                               event.preventDefault();
+                                               // Tabbing forward out of the 
extension: Focus the next focusable element
+                                               // after the input element.
+                                               $focusable = $( ':focusable' );
+                                               $focusable.each( function( i, 
node ) {
+                                                       if( node === 
self.element[0] ) {
+                                                               
self.hideExtension();
+                                                               $focusable[ ( i 
+ 1 >= $focusable.length ) ? 0 : i + 1 ].focus();
+                                                       }
+                                               } );
+                                       }
+                               }
+                       } )
                        .appendTo( $( 'body' ) );
 
                        this.element
@@ -104,7 +125,6 @@
                                        }, 150 );
                                }
                        } )
-                       // TODO: Allow direct tabbing into the extension
                        .on( 'blur.' + this.widgetName, function( event ) {
                                self._animationTimeout = setTimeout( function() 
{
                                        self.hideExtension();
@@ -113,6 +133,15 @@
                        .on( 'keydown.' + this.widgetName, function( event ) {
                                if( event.keyCode === $.ui.keyCode.ESCAPE ) {
                                        self.hideExtension();
+                               } else if ( event.keyCode === $.ui.keyCode.TAB 
&& !event.shiftKey ) {
+                                       event.preventDefault();
+                                       // When tabbing out of the input 
element, focus the first focusable element
+                                       // within the extension.
+                                       var focusable = self.$extension.find( 
':focusable' );
+                                       if( focusable.length ) {
+                                               focusable.first().focus();
+                                               clearTimeout( 
self._animationTimeout );
+                                       }
                                }
                        } );
 

-- 
To view, visit https://gerrit.wikimedia.org/r/64265
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib32351a35cbf78d84c8561ce3bb026995dbeaae2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/DataValues
Gerrit-Branch: master
Gerrit-Owner: Henning Snater <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to