모달 대화상자의 포커스 진입과 복귀를 검증하는 QA 방법

모달은 열리는 순간 포커스를 안으로 옮기고, Tab과 Shift+Tab을 대화상자 안에서 순환시키며, 닫힌 뒤 열기 트리거로 돌려보내야 합니다. Escape와 닫기 버튼의 정책도 같은 계약에 포함합니다. 이 글은 문의 폼이나 제출 오류가 아니라 삭제 확인 같은 모달 대화상자의 포커스 생명주기를 배포 전 재현하는 QA 방법에 집중합니다.

테스트 계약을 모달 상태로 쪼갠다

테스트 케이스에는 닫힘, 열림, 열린 상태, 닫힘 완료를 구분해 적습니다. 열림 직전 트리거와 닫힌 뒤 돌아갈 대상을 기록하면 포커스가 화면 위에 보인다는 설명만으로는 발견하기 어려운 복귀 누락을 잡을 수 있습니다.WCAG 2.2 키보드 조작 기준

• 열기 전: 트리거의 이름과 현재 포커스를 기록합니다.

• 열린 뒤: 대화상자 이름과 첫 포커스 대상을 기록합니다.

• 닫힌 뒤: 트리거 복귀 또는 트리거 제거 시 대체 위치를 기록합니다.

열 때 포커스를 안으로 이동한다

삭제 버튼에서 Enter 또는 Space를 누르면 대화상자가 열리고, 단순한 삭제 확인 모달에서는 취소 버튼처럼 실행 가능한 안전한 대상에 놓이도록 확인합니다. 긴 설명이 있는 모달은 정적 제목에 tabindex=-1을 부여해 제목을 포커스 대상으로 삼고, 대화상자의 접근 가능한 이름과 설명을 먼저 읽게 하는 정책도 유효합니다. 포커스 표시가 화면에서 사라지지 않는지도 별도 항목으로 남깁니다.WCAG 2.2 포커스 표시 기준

WAI-ARIA의 modal dialog 패턴은 모달 안으로 포커스를 옮기고 배경 상호작용을 막으며 닫힌 뒤 적절한 위치로 되돌리는 관계를 설명합니다. 구현 요소의 이름과 실제 포커스 대상을 관찰표에 적으세요.WAI-ARIA 모달 대화상자 패턴

Tab 순환과 복합 위젯 키를 분리한다

일반 버튼·링크·입력은 Tab으로 이동하지만 탭 목록, 메뉴, 리스트박스 같은 복합 위젯은 내부 항목을 화살표로 이동하는 별도 키 계약을 가질 수 있습니다. 따라서 “Tab으로 모든 항목을 방문한다”를 복합 위젯에 그대로 적용하지 말고, Tab으로 위젯에 진입한 뒤 화살표, Enter, Space, Escape가 해당 패턴의 역할에 맞게 동작하는지 각각 확인합니다. 모달의 마지막 탭 대상에서 Tab을 한 번 더 눌렀을 때 첫 탭 대상으로, 첫 대상에서 Shift+Tab을 눌렀을 때 마지막 대상으로 돌아오는 양방향 경계도 기록합니다.

• Tab·Shift+Tab: 포커스가 모달 밖 배경으로 새지 않는지 확인합니다.

• Escape: 닫기 정책이 명시된 모달에서 닫히고 복귀하는지 확인합니다.

• Enter·Space·화살표: 복합 위젯의 선택·이동 규칙과 일반 버튼 동작을 구분합니다.

가상 사례: 삭제 확인 모달을 재현한다

가상 입력은 목록의 삭제 버튼에서 Enter를 누르는 것입니다. 중간 기록은 “삭제 버튼 포커스 → 모달 열림 → 취소 버튼 포커스 → Tab으로 확인 버튼 → Tab으로 첫 대상인 취소 버튼 복귀 → Shift+Tab으로 마지막 대상인 확인 버튼 복귀 → Escape → 삭제 버튼 복귀”입니다. 이 경로가 반복되면 모달 내부 순환과 닫힘 복귀를 한 번에 확인할 수 있습니다.

트리거가 사라지는 실패 경계를 확인한다

모달 안에서 항목을 삭제해 열기 버튼 자체가 목록에서 제거되는 경우에는 기존 트리거로 복귀할 수 없습니다. 모달을 닫은 뒤 포커스가 페이지 맨 위로 이동하면 작업 맥락을 잃는 상황입니다. 이때는 삭제된 행의 다음 항목이나 목록 컨테이너처럼 제품 계약으로 정한 대체 위치에 보내고, 배경으로 조용히 누출하지 않는지 확인합니다.

수정 후 같은 삭제 버튼에서 다시 열고 Escape와 닫기 버튼을 각각 실행합니다. 트리거가 살아 있는 경우에는 원래 버튼으로, 제거된 경우에는 합의된 대체 위치로 이동하는지 비교 기록하고 복구 여부를 확인합니다.

입력 오류 상태 자체를 이어서 점검할 때는접근 가능한 폼 오류 복구 글을 후속 참고로 연결할 수 있습니다.

완료 조건을 결과물로 판정한다

각 모달에 트리거, 첫 포커스, Tab·Shift+Tab 경계, Escape 정책, 닫힘 후 복귀 대상, 트리거 제거 시 대체 위치가 기록되어야 합니다. 일반 Tab 이동과 복합 위젯의 화살표·Enter·Space 동작을 분리해 재현하고, 새로고침 뒤 같은 결과가 나오면 배포 전 모달 포커스 QA를 완료로 표시하세요.