Modal Focus Trap (Accessibility)
JavaScript
Hard
4 views
Problem Description
You have #modal with focusable elements and class show means open. When open, trap Tab/Shift+Tab inside modal. ESC closes.
Output Format
No output (DOM change).
Constraints
Assume #modal exists and close button has id close.
Official Solution
const modal=document.getElementById('modal');const close=document.getElementById('close');const focusables=()=>[...modal.querySelectorAll(`a,button,input,select,textarea,[tabindex]:not([tabindex='-1'])`)].filter(el=>!el.disabled && el.offsetParent!==null);const hide=()=>modal.classList.remove('show');close&&close.addEventListener('click',hide);document.addEventListener('keydown',e=>{if(!modal.classList.contains('show'))return;if(e.key==='Escape'){hide();return;}if(e.key!=='Tab')return;const f=focusables();if(!f.length)return;const first=f[0],last=f[f.length-1];if(e.shiftKey && document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey && document.activeElement===last){e.preventDefault();first.focus();}});modal.addEventListener('transitionend',()=>{if(modal.classList.contains('show')){const f=focusables();(f[0]||modal).focus();}});
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!