Focus on jQuery UI Calender accessibility with TAB

Question

We are using the jQuery datepicker to show calender control and provide an option to user to select a date from the keyboard without using mouse.

While testing the Tab key accessibility for given form, I've noticed that when the focus reaches the date field, the calendar popup appears onscreen, but when I press the Tab key again, the focus shifts to next input control but not to the calender popup.

Is there any way to shift the focus to the calendar control as soon as the popup is focused on?

HTML

<input type="text" value="first input field">
<input type="text" id="myDate">
<input type="text" value="second input field">

JS

$(document).ready(function() {
    $("#myDate").datepicker();
});

Demo

Code Fix

After giving a try to various code fixes, ended up writing below code to enable accessibility for date picker.

$("#datepicker").attr('readonly', 'readonly')
            .datepicker({})
            .keydown(function(event) {
                event.preventDefault();
                event.stopPropagation();
                //   KEY MAP
                //  [TAB: 9, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40]
                var code = event.keyCode || event.which;
                // If key is not TAB
                if (code != '9') {
                    // And arrow keys used "for performance on other keys"
                    if (code == '37' || code == '38' || code == '39' || code == '40') {
                        // Get current date
                        var parts = $(this).val().split("/"),
                            currentDate = new Date(parts[2], parts[0] - 1, parts[1]);
                        // Show next/previous day/week 
                        switch (code) {
                            // LEFT, -1 day
                            case 37:
                                currentDate.setDate(currentDate.getDate() - 1);
                                break;
                                // UP, -1 week
                            case 38:
                                currentDate.setDate(currentDate.getDate() - 7);
                                if (!_.isNull(currentDate)) {
                                    $(this).datepicker("setDate", currentDate);
                                    return false;
                                }

                                break;
                                // RIGHT, +1 day
                            case 39:
                                currentDate.setDate(currentDate.getDate() + 1);
                                break;
                                // DOWN, +1 week
                            case 40:
                                currentDate.setDate(currentDate.getDate() + 7);
                                break;
                        }
                    } else {
                        return false;
                    } // If other keys pressed.. return false
                }
            });

Answer 1

I don't think the datepicker fields/controls can be tabbed thru.

http://api.jqueryui.com/datepicker/ shows that the datepicker has specific keyboard interactions built in, perhaps because they realized tab was not a viable option. This post, jQuery UI datepicker: Configure keyboard shortcuts, talks about changing them which might help you out.