From 14392056e12cfed1cd3b0a0827366f3ab9548dcd Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Thu, 3 Dec 2015 16:39:30 +0100 Subject: [PATCH] Datepicker: Improve tab order handling Remove unneeded tabindex attribute change. Set focus to input after tab, let default behavior decide which elements gains focus next. --- ui/widgets/datepicker.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/ui/widgets/datepicker.js b/ui/widgets/datepicker.js index 7595cfc3d..e2f77b0e7 100644 --- a/ui/widgets/datepicker.js +++ b/ui/widgets/datepicker.js @@ -193,12 +193,24 @@ var widget = $.widget( "ui.datepicker", { clearTimeout( this.closeTimer ); }, - // TODO on TAB (or shift TAB), make sure it ends up on something useful in DOM order - keyup: function( event ) { + keydown: function( event ) { if ( event.keyCode === $.ui.keyCode.ESCAPE && this.calendar.is( ":visible" ) ) { this.close( event ); this._focusTrigger(); } + + if ( event.keyCode === $.ui.keyCode.TAB && this.calendar.is( ":visible" ) ) { + var element = $( event.target ); + + // Reset focus when leaving widget + if ( + ( event.shiftKey && element.is( this.calendarInstance.prevButton ) ) || + ( !event.shiftKey && element.is( this.calendarInstance.grid.last() ) ) + ) { + this.close( event ); + this._focusTrigger(); + } + } } }, @@ -262,11 +274,7 @@ var widget = $.widget( "ui.datepicker", { .hide(); this._show( this.calendar, this.options.show ); - // Take trigger out of tab order to allow shift-tab to skip trigger - // TODO Does this really make sense? related bug: tab-shift moves focus to last element on page - this.element.attr( "tabindex", -1 ); this.isOpen = true; - this._trigger( "open", event ); }, @@ -274,8 +282,6 @@ var widget = $.widget( "ui.datepicker", { this._setHiddenPicker(); this._hide( this.calendar, this.options.hide ); - this.element.attr( "tabindex", 0 ); - this.isOpen = false; this._trigger( "close", event ); },