模态框内的 jQuery Popup Datepicker 不保持焦点答案

【问题标题】：jQuery Popup Datepicker Inside a Modal Doesn't Maintain Focus模态框内的 jQuery Popup Datepicker 不保持焦点
【发布时间】：2016-07-14 14:23:33
【问题描述】：

我正在尝试为我的模态视图增加一个可访问的日期选择器弹出窗口。单击“时间卡表单”打开模式。在模态框内使用选项卡。当日历图标处于焦点时，空格键将打开日历弹出窗口。在此弹出窗口中，我应该能够使用制表符访问月份选择图标、日期或关闭按钮，然后返回选择，即制表符顺序应包含在日历弹出窗口中。一旦它们成为焦点，我也应该能够使用箭头键来逐步完成这些日子。当我在模式之外使用日期选择器时，所有这些都有效。当我将日期选择器放在模态框内时，日历无法保持焦点并且制表符关闭弹出窗口。

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

  // 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 中将所有部分放在一起有些困难，所以这里是示例的 URL：http://lucillekenney-demos.com/sass-muse/time2.html

任何方向将不胜感激。

附言我没有使用 Bootstrap 日期选择器，因为有人告诉我它不太容易访问。

【问题讨论】：

标签： javascript jquery datepicker accessibility

【解决方案1】：

我相信，您猜测 aria-hidden 代码导致此问题是不正确的。 aria-hidden 属性应该对键盘用户没有影响，只有屏幕阅读器用户。键盘用户仍然可以访问具有 aria-hidden 属性的元素。

【讨论】：