Question

我正在尝试将可访问的datepicker弹出窗口扩展到我的模态视图。单击“考勤卡表单”将打开模式。在模态中使用制表符。当日历图标处于焦点时，空格键将打开日历弹出窗口。在这个弹出窗口中，我应该能够使用Tab键来访问月份选择图标，天或关闭按钮，然后返回到选择，即，Tab键顺序应该包含在日历弹出窗口内。我也应该能够使用箭头键来完成他们聚焦后的日子。当我在模态之外使用datepicker时，所有这些都有效。当我将日期选择器放在模态中时，日历无法保持焦点，并且tab键会关闭弹出窗口。

我很确定问题出现在这段代码中：

  // Hide the entire page (except the date picker)
  // from screen readers to prevent document navigation
  // (by headings, etc.) while the popup is open
  $("main").attr('id','dp-container');
  $("#dp-container").attr('aria-hidden','true');
  $("#skipnav").attr('aria-hidden','true');

我在jsfiddle中将所有部分拉到一起时遇到了一些困难，所以这里是一个示例的网址：http://lucillekenney-demos.com/sass-muse/time2.html

任何方向都将不胜感激。

P.S。我没有使用Bootstrap datepicker，因为我被告知它不太容易访问。

Answer 1

就你猜测咏叹调隐藏代码导致这个问题不正确而言，我相信。 aria-hidden属性应该对键盘用户没有影响，只对屏幕阅读器用户有影响。键盘用户仍然可以使用aria-hidden属性访问元素。

模态内的jQuery Popup Datepicker不会保持焦点

1 个答案: