Liegt über einem focusierbaren Element z.B. ein Layer dann sind diese Elemente weiterhin mit Tastatur auswählbar. Folgendes Script löst das Problem durch temporäres setzen eines negativen tabindex.
Beispiel: https://daschmi.de/static/ds_focuser/
const ds_focuser_open_layer = (el_layer) => {
document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)').forEach((el) => {
el.setAttribute('ds_focuser_tabindex', el.getAttribute('tabindex'));
el.setAttribute('tabindex', '-1');
});
el_layer.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
el.removeAttribute('ds_focuser_tabindex');
});
};
const ds_focuser_close_layer = () => {
document.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
el.removeAttribute('ds_focuser_tabindex');
});
};