[jQuery] focus 이동

웹접근성을 준수하기 위해서는
모달을 띄웠을 때 띄운 모달 안에서 포커스가 이동하는 이른바 포커스트랩핑(focus trapping)이 되어야 한다.

function focusTrapping(_layer){
    const focusableElements = 'a[href], area[href], input:not([disabled]), select:not(]disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
    const layer = _layer;
    const focusableContent = $(layer).find(focusableElements);
    const firstFocusableElement = focusableContent[0];
    const lastFocusableElement = focusableContent[focusableContent.length - 1];
    
    $(layer).on('keydown', function(e){
        let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
        
        if( !isTabPressed ){ return; }
        
        if( e.shiftKey ){
            if( document.activeElement === firstFocusableElement ){
                lastFocusableElement.focus();
                e.preventDefault();
            }
        }else{
            if( document.activeElement === lastFocusableElement ){
                firstFocusableElement.focus();
                e.preventDefault();
            }
        }
    });
}