접근성 포커스 제어 js

pc버전이긴 하지만 흠 쓸만하다....

좀 더 리펙토링해야 겠지만 귀찮음.....

/**
 * @description 레이어팝업을 위한 커스텀 포커스 이벤트
 * @param { jQuery  } - jQuery 자체를 전달 / 맨하단에 입력되어 있음.- $변수 충돌 및 버전 변경 방지.
 * return CFocus 생성자 함수로 갱신.
 * @example  var customFocus = new CFocusEvent(); //미리 인스턴스화 하여 생성해 둔다.
 *  customFocus.run({ //팝업 호출시 선언함.
               container: "팝업컨테이너 jQuery선택자명",
               open: "팝업을 열게하는 개체 -jQuery선택자명",
               first: "팝업내에 포커스가 이동하게될 첫번째 개체- jQuery선택자명",
               close: "팝업닫기 버튼 - jQuery선택자명"
           });
 
 * //첫번째 아이템 갱신(예 좌우버튼 적용시 첫실행이나 마지막실행시 버튼 비활성등으로 첫번째 아이템의 포커스를 갱신할 경우 )
 * customFocus.changeFirstItem( "선택자" );
 * $("선택자").focus(); //첫번째 아이템 갱신후 포커스는 직접지정해야 한다.
 * customFocus.updateFocus("jQuery선택자명"); // 팝업 닫히지 않고 크기라던지 내용이 갱신될때 강제 포커스 이동시킴.
 * //팝업이 닫힐때 호출. - 팝업내에 컨텐츠들이 가지고 있는 이벤트 및 tabindex 를 제거 한다. 매개변수로 함수 대입가능.
 * customFocus.clear()  
*/
var CFocusEvent=( function($){
            var eventObj={
                updateFocus:function( item ) {
                    $(item).focus();
                },
                firstFocusEvent:function() {
                    var that=this;
                    if( that.getFirstItem()!==false ) {
                        // that.first.attr("tabindex", "0");

                        that.getFirstItem().on("keydown", function(e) {
                            //버블링 방지
                            e.stopPropagation();

//                            console.log("first content keydown"+e.target)
                            if(e.keyCode==9 ) {
                                if(e.shiftKey==true) {
                                    e.preventDefault();
                                    setTimeout(function() {
                                        that.container.focus();
                                        that.containerFocusEvent();
                                    }, 20 );
                                }
                            }
                        });
                    }
                },
                closeFocusEvent:function(){
                    var that=this;
                    that.close.on("keydown", function(e) {
                        //버블링 방지
                        e.stopPropagation();
                        if( e.keyCode==9) {
                            if(e.shiftKey==false) {
                                e.preventDefault();
                                setTimeout(function() {
                                    that.container.focus();
                                    that.containerFocusEvent();
                                }, 20 );
                            }else{
                                if(that.first===false) {
                                    e.preventDefault();
                                    that.container.focus();
                                    that.containerFocusEvent();
                                }
                            }
                        }
                    });
                },
                containerFocusEvent:function(){
                    var that=this;
                    that.container.on("keydown", function(e) {
                        e.stopPropagation();
//                        console.log("컨테이너 keydown"+e.target)
                        if(e.keyCode==9) {

                            if(e.shiftKey==true) {
                                e.preventDefault();
                                that.close.focus();
                            }else{
                                if(that.getFirstItem()!==false) {
                                    e.preventDefault();
                                    that.first.focus();
                                }else{
                                    e.preventDefault();
                                    that.close.focus();
                                }
                            }
                            $(e.currentTarget).off("keydown");
                        }
                    });
                },
                buildKeyDown:function(){
                    var that=this;
                    this.firstFocusEvent();
                    this.closeFocusEvent();
                    this.containerFocusEvent();
                },
                removeFocusEvent:function( targetType ){
                    var that=this;
                    switch(targetType) {
                        case "first" :
                                that.first.off("keydown");
                            break;
                        case "close" :
                                 that.close.off("keydown");
                            break;
                        case "container" :
                                 that.container.off("keydown");
                            break;
                    }
                },
                setFirstItem:function( item ){
                    this.first=$( item );
                },
                getFirstItem:function(){
                    return this.first;
                },

                changeFirstItem:function( addItem, removeItemType ){
                    var that=this;
                    this.removeFocusEvent( "first" );
                    setTimeout(function(){
                        that.setFirstItem( addItem );
                        that.firstFocusEvent();
                    },200);
                },
                clear:function(func, args) {
                    var that=this;
                    if(func!==undefined){
                        if( args!==undefined ) {
                            func.apply(null, args);
                        }else{
                            func();
                        }
                    }
                    that.open.focus();
                    if(that.first!==false) {
                        that.removeFocusEvent("first");
                    }
                    //that.first.removeAttr("tabindex");
                    that.container.removeAttr("tabindex");
                    that.removeFocusEvent("close");
                    that.removeFocusEvent("container");

                }
            }

            function CFocus(){ }
            CFocus.prototype=eventObj;
            CFocus.prototype.run=function( itemObj ) {
                var that=this;
                that.first=( itemObj.first===undefined || itemObj.first===null)? false :$(  itemObj.first );
                that.close=$( itemObj.close );
                that.open=$( itemObj.open );
                that.container = $(itemObj.container);
                that.container.attr("tabindex","0").focus();
                that.buildKeyDown();

            };

            return CFocus;
        }(jQuery) );