diff --git a/index.html b/index.html index 23ada4e..4eb9d48 100644 --- a/index.html +++ b/index.html @@ -1157,10 +1157,12 @@ document.getElementById('mainContent').setAttribute('inert', ''); // Focus first focusable element in modal - const focusable = modal.querySelectorAll('button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); - if (focusable.length > 0) { - setTimeout(() => focusable[0].focus(), 50); - } + setTimeout(() => { + const focusable = getFocusableElements(modal); + if (focusable.length > 0) { + focusable[0].focus(); + } + }, 50); // Add event listener for Escape key document.addEventListener('keydown', handleModalKeydown); @@ -1181,6 +1183,13 @@ } } + function getFocusableElements(container) { + const elements = container.querySelectorAll('button, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'); + return Array.from(elements).filter(el => { + return el.offsetParent !== null && !el.disabled; + }); + } + function handleModalKeydown(e) { if (!activeModalId) return; const modal = document.getElementById(activeModalId); @@ -1194,7 +1203,7 @@ // Trap focus on Tab if (e.key === 'Tab') { - const focusable = modal.querySelectorAll('button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); + const focusable = getFocusableElements(modal); if (focusable.length === 0) return; const first = focusable[0];