使用TAB键专注于jQuery UI Calender可访问性 [英] Focus on jQuery UI Calender accessibility with TAB key

问题描述

我们正在使用jQuery datepicker 来显示日历控件并向用户提供选择日期的选项从键盘上而不使用鼠标.

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.

在测试给定格式的 Tab 键的可访问性时，我注意到当焦点到达日期字段时，日历弹出窗口会显示在屏幕上，但是当我按下 Tab 键，焦点将移至下一个输入控件，而不移至压光机弹出窗口.

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();
});

演示

代码修复

尝试各种代码修复后，最终在下面的代码中编写了代码，以启用日期选择器的可访问性.

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
                }
            });

推荐答案

我认为日期选择器字段/控件无法通过选项卡进行选择.

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

http://api.jqueryui.com/datepicker/显示日期选择器具有特定的内置键盘交互功能，可能是因为他们意识到选项卡不是一个可行的选择.这篇 jQuery UI datepicker:配置键盘快捷键，讨论了如何更改它们可能会帮助您.

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.

这篇关于使用TAB键专注于jQuery UI Calender可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！