웹접근성 레이어 팝업 포커스 트랩 다른방법

by hohoya33

HTML

<button class="dialog_open" aria-haspopup="dialog">상품 퀵뷰</button>

<div id="quick_view" class="dialog" role="dialog" aria-modal="true" aria-labelledby="quick_title">
  <div id="firstElement" tabindex="0"></div>
  
  
  <div class="dialog_content" role="document">
      <h2 class="dialog_title" id="quick_title">제목입니다.</h2>
      <ul class="cdtl_pager">
        <li><a href="#" id="firstButton"><img src="http://item.ssgcdn.com/85/36/55/item/1000030553685_i1_60.jpg" alt="첫번째 상품 이미지"></a></li>
        <li><a href="#"><img src="http://item.ssgcdn.com/85/36/55/item/1000030553685_i2_60.jpg" alt="두번째 상품 이미지"></a></li>
        <li><a href="#"><img src="http://item.ssgcdn.com/85/36/55/item/1000030553685_i4_60.jpg" alt="세번째 상품 이미지"></a></li>
        <li><a href="#"><img src="http://item.ssgcdn.com/85/36/55/item/1000030553685_i5_60.jpg" alt="네번째 상품 이미지"></a></li>
      </ul>

      <button id="lastButton" class="dialog_close"><span class="blind">퀵뷰 레이어 팝업 닫기</span></button>
  </div>  
  
  <div id="lastElement" tabindex="0"></div>
</div>


<div id="overlay" class="overlay"></div>

CSS

:focus{outline:4px solid #FF0000}
.blind{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;line-height:0;white-space:normal;word-wrap:break-word;word-break:break-all;clip:rect(0,0,0,0)}
.blind:before{display:block;width:0;height:0;font-size:0;content:'\00a0'}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal}
button{border:0}

        
.dialog_open{border-radius:2px;display:inline-block;height:36px;line-height:36px;padding:0 16px;vertical-align:middle;font-size:14px;text-decoration:none;color:#fff;background-color:#26a69a;text-align:center;letter-spacing:.5px;cursor:pointer}
.dialog_close{display:inline-block;overflow:hidden;position:absolute;top:0;right:-1px;z-index:10;width:49px;height:49px;background:url(http://static.ssgcdn.com/ui/ssg/img/product/v2/sp_cmqv.png) no-repeat 0 -83px;font-size:0;line-height:0;vertical-align:top}

.dialog{display:none;width:300px;position:fixed;top:50%;left:50%;background:#fff;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);margin:0;z-index:10;}
.overlay{position:fixed;top:0;left:0;display:none;background-color:rgba(0,0,0,0.5);height:100vh;width:100vw;}


.dialog_title{text-align: center;}
.cdtl_pager{text-align:center;padding:0;}
.cdtl_pager li{display:inline-block}

JavaScript

var welDialogOpen = $('.dialog_open');
var welDialogClose = $('.dialog_close');
// 마지막 포커스가 있는요소를 저장하기위한 변수
var welLastFocused;

welDialogOpen.on('click', function(){
	showModal();
});

$('#lastElement').focusin(function(e) { // 다음 포커스
	$('#firstButton').focus();
});

$('#firstElement').focusin(function(e) { // 이전 포커스
	$('#lastButton').focus();
});

function showModal() {
  // 마지막 포커스된 요소 저장
  welLastFocused = document.activeElement;
	$('#quick_view').show().attr('tabindex', '0').focus();
  welDialogClose.one('click', hideModal);
  $('#overlay').show();
}

function hideModal() {
	$('#quick_view').hide().removeAttr('tabindex');
	welLastFocused.focus();
  $('#overlay').hide();
}