회원가입 form의 마크업과 focus제어

이 예제는 tab키로 이동이 가능합니다.
또한, 체크박스에 space바를 눌러 체크해 보세요.

• 회원가입 form요소 : form-wrap
• 이용약관 클릭시 나타나는 모달창 :popup

tab키 이동에 대한 포커스 제어

선형구조

tab키를 이용해 form요소의 내용을 순차적으로 탐색할 수 있도로고 HTML구조에 신경을 썼습니다.
초점같은 경우에는 기본적으로 마크업 순서에 맞춰 움직이게 되어있어, HTML의 구조가 가장 중요하다고 생각을 했습니다.

하지만, 약관의 내용을 보여주는 모달창인 경우, form요소의 약관 체크박스를 클릭했을때에 나타나야하는 부분이지만, HTML구조상 초점이 자동으로 모달창으로 진입하기에는 어려움이 있습니다.

그래서 javascript를 이용해 모달창이 열릴때 초점이 모달창 안쪽 버튼에 초점이 갈 수 있도록 작성했습니다.

function openTerm(){
    body.style.overflow = 'hidden';
    dim.style.display = 'block';
    popup.style.display = 'block';
    btnPopClose.focus(); //form 요소에 있던 초점이 모달창 버튼에 들어가도록 하는 코드
    btnPopClose.style.outline = '1px solid red';
}
function clsoeTerm(){
    body.style.overflow = 'auto';
    dim.style.display = 'none';
    popup.style.display = 'none';
    termEmailBox.focus();//모달창이 닫히고 나서 다음 체크박스에 초점을 강제로 옮겨준다.
}

form 요소 약관체크 박스 시나리오

• 약관 체크박스를 클릭할때에 약관관련 안내 모달창이 나타난다.
• 약관체크박스가 체크된 상태에서 체크를 해체한다면, 모달창은 나타나지 않도록 제어한다.

위에 시나리오를 바탕으로 초점을 제어하고 커스텀한 체크박스의 형태를 바꿔 보았습니다.
가장 보편적으로 사용하는 label태그의 가상선택자를 만들어 라벨을 클릭하면 체크박스가 클리되도록 커스텀을 해보았습니다.

HTML

<input type="checkbox" required id="termsService">
<label for="termsService">
  <span class="underline">이용약관 동의</span> 및 <span class="underline">개인정보 처리방침</span> <span class="require"></span>
</label>

CSS

.form-wrap .agree label{
    position: relative;
    margin-bottom: 0px;
    padding-left: 41px;
    font-size: 18px;
    line-height: 26px;
}
.form-wrap .agree label::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #dcdce0;
    border-radius: 5px;
    box-sizing: border-box;
}
.form-wrap .agree input[type=checkbox]{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    
    /*
    IR기법으로 체크박스를 숨깁니다.
    이 방법은 sass를 사용하다면 @mixin을 사용하면 편할 거라고 생각했습니다.
    */
}
.form-wrap .agree input[type=checkbox]:focus + label::before{
    outline: 1px solid #ff2a00;
    /*
    input에 포커스를 주면 커스텀한 label에 가상선택자에 초점이 진입했다는 것을 알려주기 위해 의미로 넣은 outline입니다.
    */
}
.form-wrap .agree input[type=checkbox]:checked + label::before{
    background: #595a60;
    /*
    체크박스가 체크가 되면(클릭 또는 키보드로 spacebar) 커스텀된 라벨이 체크가 되는 것처럼 css로 변화를 줍니다.
    */
}

JAVASCRIPT

termBox.addEventListener('click',()=>{
    if(termBoxLi.classList.contains('checked')){
        termBoxLi.classList.remove('checked');
    }else{
        termBoxLi.classList.add('checked');
        openTerm();
    }
});

약관 시나리오 중..

• 약관체크박스가 체크된 상태에서 체크를 해체한다면, 모달창은 나타나지 않도록 제어한다.

위의 내용의 시나리오를 설정하기 위한 코드입니다.
checked라는 클래스의 여부에 따라 조건식을 걸어 각 상황에 맞는 동작을 하도록 만들었습니다.

1. checked되지 않은 상황

약관에 체크가 되지 않는다면, 체크 클래스를 추가해주면서 약관 모달창이 나타나도록 하는 함수를 호출해 약관 모달창이 화면에 나타나도록 합니다.

2. checked된 상황

checked된 상황은 약관 모달창을 열고 닫은 후의 상황이므로, 취소하는 상황만 남게 됩니다.
checked된 상황에서 클릭을 하게 된다면 클래스를 가지고 있어 클래스를 제거만 합니다.
체크박스는 체크되었을때 다시 클릭하게 되면 자동으로 해제 되기 때문에 따로 처리를 하지 않았습니다.

이렇게 되면, 약관동의하기를 체크했을 경우에 모달창이 나타나고, 취소하기 위해 다시 클릭했을 경우에는 모달창이 나타나지 않고 체크만 해제됩니다.

---

마치며..

이번 폼을 만들게 되면서 알게 된 것이 있는에 폼요소를 tab키로 이동하다 마우스의 클릭을 요하는 상황에는 space바를 이용한다는 것을 알게 되었습니다.
Enter를 누르게되면 form요소가 제출되는 상황이 발생해 키보드만으로도 마우스와 동일하게 작동하고 싶은데 어떻게 해야 하나 고민이 많았는데, 클릭이 space바라는 것을 알고 고민되었던 것들이 쉽게 다가왔습니다.

이 폼요소가 기획에 따라 초점제어 코드가 달라진다는 것을 생각해 보다면 form요소에도 많은 고려사항이 필요하다는 것을 알게 되었던 것 같습니다.

더 좋은 방법이 있다면 알려주세요.^^