Ich versuche, ein zugängliches Datepicker-Popup zu meiner modalen Ansicht zu erweitern. Durch Klicken auf das 'Zeitkartenformular' wird das Modal geöffnet. Verwenden Sie Registerkarten im Modal. Wenn das Kalendersymbol scharf ist, öffnet die Leertaste das Kalender-Popup. Während ich in diesem Popup bin, sollte ich in der Lage sein, Tabbing zu verwenden, um auf die Monatsauswahl-Symbole, Tage oder Schließen-Schaltfläche zuzugreifen und dann zurückzukehren, um auszuwählen, d.h. die Tab-Reihenfolge sollte innerhalb des Kalender-Popups umbrochen werden. Ich sollte auch in der Lage sein, mit den Pfeiltasten die Tage zu durchlaufen, wenn sie scharf sind. All das funktioniert, wenn ich den Datapicker außerhalb des Modals verwende. Wenn ich den Datepicker in das Modal lege, kann der Kalender den Fokus nicht beibehalten, und die Tabs schließen das Popup.jQuery Popup Datepicker in einem Modal behält den Fokus nicht bei
Ich bin mir ziemlich sicher, dass das Problem in diesem Stück Code ist:
// 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');
Ich hatte einige Schwierigkeiten, alle Teile zusammen in jsfiddle ziehen, so ist hier eine URL zum Beispiel: http://lucillekenney-demos.com/sass-muse/time2.html
Jede Richtung würde sehr geschätzt werden.
p.s. Ich benutze den Bootstrap-Datapicker nicht, da mir gesagt wird, dass er nicht so zugänglich ist.