[js] 키보드 접근성을 위한 tabindex 사용

1. 레이어 띄우면서 레이어에 tabindex=0 주고 focus 시키고 removeAttr tabindex
처음 포커스는 레이어가 뜨는 순간 레이어의 내용을 읽어주게끔 위해.

Remove하는 이유는 다시 tab 탐색시 포커스가 되지 않게 하기위해.. Div는 원래 포커스 안가니까...

 

2. 레이어 내부에서 tab(shift+tab 포함) 루프..

Alert/confirm/새창 모두 tab은 루프됨. 기본 Script alert. Confirm. 새창팝업과 ux/ui 유지..

$(document).on('keydown', '.pop_container .ui_btn_close', function (e) {
var isShift = window.event.shiftKey ? true : false;

$(document).on('keydown', '.pop_container .ui_btn_close', function (e) {
  var isShift = window.event.shiftKey ? true : false;

  if(isShift && (e.keyCode == 9)){
  	return;
  }else if(event.keyCode == 9){
  	$('.pop_container').focus();
  	return false;
  } //end if
});

3. 닫기버튼 누를경우 opener로 재포커스.2번과동일 사유.

 

4. 레이어 내에서 esc누를경우. 닫기버튼 누른것과 동일 기능. 기본 alert. Confirm이 esc누르면 닫히기 때문..

 

5. 레이어 상단/하단에 ???레이어시작/???레이어끝.. 이런식으로 숨김텍스트로 넣어서 스크린리더기 사용자가 가상 뷰 포인터로 레이어 영역을 빠져나가려 할때 알수 있게 해줌..

 

6. 레이어가 떴을때.. 레이어 바깥부분을 클릭하면 레이어가 닫히게 처리(alert. Confirm 창이 창을 닫지 않으면 바닥 컨트롤이 안되는 ux 유지..& 중복으로 레이어가 뜰수 있는 혼란한 상황방지..) 이건 일반 비장애 사용자를 위한 기능이죠.. 영국 abilitynet 권고로 작업.

 

7. 레이어 opener에 title 새창 추가