이렇게 해보세요
- Tab으로 신청 취소까지 가서 Enter로 여세요. 포커스가 모달 안으로 들어갑니다.
- Tab을 계속 눌러보세요. 모달 밖으로 나가지 않고 순환합니다.
- Esc를 누르면 닫힙니다. 따로 코드를 쓰지 않았는데도요.
- 닫힌 뒤 Tab을 눌러보세요. 포커스가 열었던 버튼으로 돌아와 있습니다.
자바스크립트는 두 줄뿐입니다. showModal()과 close().
포커스 이동, 포커스 순환, Esc 닫기, 배경 비활성화, 포커스 복귀를
브라우저가 대신해줍니다. 앞 페이지의 div 모달에서 손으로 구현해야 했던 것들입니다.