jQuery彈出日期選擇器模式內不會保持焦點

Question

我想增加一個可訪問的datepicker彈出到我的模態視圖。點擊'Timecard Form'打開模式。使用模式內的標籤。當日歷圖標處於焦點時，空格鍵將打開日曆彈出窗口。在彈出窗口中，我應該能夠使用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所以這裏是一個URL的例子：http://lucillekenney-demos.com/sass-muse/time2.html

任何方向將不勝感激。

p.s.我沒有使用Bootstrap datepicker，因爲我被告知它不太容易訪問。

Answer 1

根據您的猜測，隱匿詠唱代碼導致此問題是錯誤的，我相信。詠歎調隱藏屬性應該對鍵盤用戶，只有屏幕閱讀器用戶沒有影響。鍵盤用戶仍然可以訪問具有aria-hidden屬性的元素。