탭 접근성 (a링크가 콘텐츠 내에 없는 경우)

				
$(document).ready(function() {
    //학교안내 > 부서기관 > 본부 컨텐츠 탭
	App.AccessToTab.init({
		activateLater: function() {
			// User-defined functions
		}
	});
});
//======================================================================
// 학교안내 > 부서기관  컨텐츠 탭 - 접근성
//======================================================================
App.AccessToTab = function(){
	var self;
	var settings;
	var $activeTitTab = null;
	var $activeParents = null;
	var idx;
	var topWrap, tabBox, tabContent, btnMore;
	var topWrapIndex;
	return {
		init: function(opt){
			self = this;
			settings = $.extend({
				topWrap : '[data-access="mini-tab-box"]',
				tabBox : '[data-access="mini-title-box"]',
				tabContent : '[data-access="mini-content-box"]',
				btnMore : '[data-access="btn-more"]',
			}, opt);

			topWrap = settings.topWrap;
			tabBox = settings.tabBox;
			tabContent = settings.tabContent;
			btnMore = settings.btnMore;

			//탭 미니보드가 2개 이상인데 btnMore 버튼이 없을 때 a태그 추가
			$(topWrap).each(function() {
				if($(this).find(btnMore).length == 0) {
					const h4Text = $(this).closest('.con-box').find('h4').text().trim();
					$(this).append('');

				}
				//초기화시 active되어있는 첫 탭콘텐츠에 tabindex적용 
				$(topWrap).find(tabContent + ' > div.active').attr('tabindex', '0');
			});

			$(tabBox).find('li a').attr('role','tab');

			//탭 클릭시
			$(topWrap + ' ' + tabBox + ' li > a').on('click', function () {

				idx = $(this).parents('li').index();
				$activeTitTab = $(this);
				$activeParents = $activeTitTab.parents(topWrap);

				//해당 탭 active
				$(this).parent().siblings().removeClass('active');
				$(this).parent().addClass('active');

				//해당 탭과 매치되는 콘텐츠 active
				$activeParents.find(tabContent + ' > div').removeClass('active').removeAttr('tabindex');
				$activeParents.find(tabContent + ' > div:eq(' + idx + ')').addClass('active').attr('tabindex', '0');

				//탭에 선택됨 타이틀 적용
				$(this).parent().siblings().find('a').attr('title', '축소됨');
				$(this).attr('title', '확장됨');
			});



			//탭 웹접근성 focus 처리
			$(document).on('keydown',  function (event) {
				if (event.type == 'keydown') {   
					if(event.keyCode == '9'){ //tab
						$(topWrap + ' ' + tabBox + ' li.active' + ' > a').focusin(function(){
							idx = $(this).parents('li').index();
							$activeTitTab = $(this);
							$activeParents = $activeTitTab.parents(topWrap);
							$activeParents.addClass('tab-ready');
						});
						$(topWrap + ' ' + tabBox + ' li.active' + ' > a').focusout(function(){
							idx = $(this).parents('li').index();
							$activeTitTab = $(this);
							$activeParents = $activeTitTab.parents(topWrap);
							$activeParents.removeClass('tab-ready');
						});
					}
					if (!event.shiftKey && event.keyCode == '9') { //tab
						if($activeParents){
							if ($activeParents.hasClass('tab-ready')){
								self.tabReady(opt);
							} else if ($activeParents.hasClass('tab-end')){
								self.tabEnd(opt);
							} 
						}
					}
				}
			});
			$(document).on('keydown', topWrap + ' ' + tabBox + ' > li > a', function(event) {
				if (event.keyCode == '13') {
					idx = $(this).parents('li').index();
					$activeTitTab = $(this);
					$activeParents.addClass('tab-ready');
					$activeParents.find(tabContent).find('a').removeAttr('tabindex');	
				}
			});
			if(opt.activateLater) { //사용자 정의 함수 실행
				opt.activateLater();
			}
		},
		tabReady: function(opt) {
			//tabBox에 포커스
			if($activeParents.find(tabBox + ' li.active' + ' > a').is(':focus') == true){
				//tabContent 링크로 포커스 
				setTimeout(function(){	
					if($activeParents.find(tabContent + ' > div.active').find('a').length > 0){ //active 탭콘텐츠에 링크가 있을 때 
						$activeParents.find(tabContent).find('a').removeAttr('tabindex');	
						$activeParents.find(tabContent + ' > div.active a:eq(0)').focus();
						$activeParents.removeClass('tab-ready');

						//tabContent의 마지막 링크에 포커스 
						$activeParents.find(tabContent + ' > div').find('a:last').focus(function(){
							setTimeout(function(){
								$activeParents.addClass('tab-end');
							});
						});
					} else { //active 탭콘텐츠에 링크가 없을 때 
						$activeParents.find(tabContent + ' > div.active').focus();
						$activeParents.removeClass('tab-ready');
						$activeParents.addClass('tab-end');
					}

				});

			}else if($activeParents.find(tabBox + ' li:not(.active) > a').is(':focus') == true){
				$activeParents.find(tabContent).find('a').attr('tabindex', '-1');
			}
		},
		tabEnd: function(opt) {
			$activeParents.removeClass('tab-end');
			if($activeParents.find(tabContent + ' > div.active').next('div').find('a').length > 0){ //active 탭콘텐츠 다음 콘텐츠에 링크가 있을 때 
				if($activeParents.find(tabContent + ' > div.active').find('a').length > 0){ //active 탭콘텐츠(현재)에 링크가 있을 때 
					$activeParents.find(tabContent + ' > div.active').find('a:last').focusout(function(){ //.tab-box로 회귀
						setTimeout(function(){
							$activeParents.find(tabBox + ' > li.active').next('li').find('a').focus();		
							$activeParents.addClass('tab-ready');
						});
					});
				} else { //active 탭콘텐츠(현재)에 링크가 없을 때 
					setTimeout(function(){ 
						$activeParents.find(tabContent + ' > div').attr('tabindex', '-1');
						$activeParents.find(tabBox + ' > li.active').next('li').find('a').focus();		
						$activeParents.addClass('tab-ready');
					});
				}

			} else {  //active 탭콘텐츠 다음 콘텐츠에 링크가 없을 때 
				setTimeout(function(){
					$activeParents.find(tabContent + ' > div').attr('tabindex', '-1');
					$activeParents.find(tabBox + ' > li.active').next('li').find('a').focus();		
					$activeParents.addClass('tab-ready');
				});

			}

			if($activeParents.find(tabBox + ' li:not(.active) > a').is(':focus') == true){
				setTimeout(function(){
					$activeParents.find(tabContent).find('div').removeAttr('tabindex');
					$activeParents.find(tabContent).find('a').attr('tabindex', '-1');
					$activeParents.removeClass('tab-ready');
				});
			}else if($activeParents.find(tabBox + ' li:not(.active) > a').is(':focus') == false){
				setTimeout(function(){
					$activeParents.find(tabContent).find('div').removeAttr('tabindex');
					$activeParents.find(tabContent).find('a').removeAttr('tabindex');
				});
			}

		}

	}
}();