模态内的jQuery Popup Datepicker无法保持焦点

Question

我正在尝试将可访问的datepicker弹出窗口扩展到我的模式视图。 单击“时间卡表单”将打开模式。 使用模态内的选项卡。 当日历图标对准焦点时，空格键将打开日历弹出窗口。 在此弹出窗口中时，我应该能够使用制表符访问月份选择图标，天或关闭按钮，然后返回以进行选择，即，制表符顺序应包含在日历弹出窗口中。 一旦它们成为焦点，我也应该能够使用箭头键逐步浏览。 当我在模态之外使用datepicker时，所有这些都有效。 当我将日期选择器放在模式中时，日历无法保持焦点，而制表键会关闭弹出窗口。

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

  // 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

任何方向将不胜感激。

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

Answer 1

我认为，就您的猜测而言，使用aria隐藏代码会导致此问题是不正确的。 aria-hidden属性应该对键盘用户无效，而对屏幕阅读器用户无效。 键盘用户仍然可以使用aria-hidden属性访问元素。