jQuery UI datepicker图标触发器IMG无法通过键盘访问

Question

我正在使用带有图标触发器的datepicker来渲染图像。 可以在这里找到示例http://jqueryui.com/datepicker/#icon-trigger

如果将光标放在INPUT并单击选项卡上，它将跳过日历IMG并移至下一个可用元素。

问题在于，IMG元素没有将tabindex设置为> 0的值（根本没有属性）。 我需要将其设置为0。

有没有人只通过使用键盘来切换即可获取图像？

为什么这样重要的背景：

从可访问性的角度来看**，这是很糟糕的，因为如果您只能使用键盘（而不是鼠标），则由于残障或您希望键盘输入而无法访问日历。

当我的应用程序通过Accessibility软件审核时，在这一点上失败。

**图标触发器：由于触发元素由IMG标签组成，因此无法通过键盘访问，也不包含文本等效项以及相关的ARIA角色，以便屏幕阅读器用户传达这是一个活动元素。 REF。 https://www.levelaccess.com/jquery-ui-accessibility-analysis/

Answer 1

在查看日期选择器文档并看到错误记录在这里之后： https ： //bugs.jqueryui.com/ticket/9625，但是上面没有任何活动。 因此，我发现了一种应该很容易实现的解决方法。 我将使用以下jQuery添加tabindex：

$(".ui-datepicker-trigger").attr("tabIndex", "0");

“ ui-datepicker-trigger”类似乎出现在每个图标触发器图像上，因此这会将tabIndex添加到所有实例。

接下来，由于当您跳到IMG并按Enter时onclick处理程序不起作用，因此我连接了一个datepicker（“ show”）来调用onkeypress上的show：

$(".ui-datepicker-trigger").attr("onkeypress", $(this).prev().datepicker('show');'); 

prev（）之所以在这里起作用，是因为在运行时将img附加在调用datepicker的INPUT之后。

完整代码：

$(document).ready(function () {
    var img = $(".ui-datepicker-trigger"); 
    if (img.length !== 0) {
        img.attr("tabIndex", "0"); // set tabIndex=0 so that you can tab to the image using keyboard only
        var js = "$(this).prev().datepicker('show');";
        img.attr("onkeypress", js); // invoke the datepicker show method onkeypress
    }
});