diff --git a/src/js/dialog.js b/src/js/dialog.js index 22ff77c..3c847b3 100644 --- a/src/js/dialog.js +++ b/src/js/dialog.js @@ -40,23 +40,30 @@ const HellionDialog = { */ _show(config) { return new Promise(resolve => { + const prevFocus = document.activeElement; const overlay = document.createElement('div'); overlay.className = 'dialog-overlay'; const box = document.createElement('div'); box.className = 'dialog-box'; + box.setAttribute('role', config.isConfirm ? 'alertdialog' : 'dialog'); + box.setAttribute('aria-modal', 'true'); + box.setAttribute('aria-labelledby', 'dialogTitle'); + box.setAttribute('aria-describedby', 'dialogBody'); // Header const header = document.createElement('div'); header.className = 'dialog-header'; header.appendChild(this._createIcon(config.type)); const titleSpan = document.createElement('span'); + titleSpan.id = 'dialogTitle'; titleSpan.textContent = config.title; header.appendChild(titleSpan); // Body const body = document.createElement('div'); body.className = 'dialog-body'; + body.id = 'dialogBody'; body.textContent = config.message; // Actions @@ -69,6 +76,7 @@ const HellionDialog = { overlay.classList.remove('active'); overlay.remove(); }); + if (prevFocus && typeof prevFocus.focus === 'function') prevFocus.focus(); resolve(result); } @@ -106,6 +114,18 @@ const HellionDialog = { e.preventDefault(); cleanup(config.isConfirm ? false : undefined); } + if (e.key === 'Tab') { + // Fokus-Falle: nur die Buttons im actions-Container sind fokussierbar + const items = Array.from(actions.querySelectorAll('button')); + if (items.length === 0) return; + const first = items[0]; + const last = items[items.length - 1]; + if (e.shiftKey && document.activeElement === first) { + e.preventDefault(); last.focus(); + } else if (!e.shiftKey && document.activeElement === last) { + e.preventDefault(); first.focus(); + } + } } document.addEventListener('keydown', keyHandler);