플랫폼 제어 대화상자 닫기

웹 기능: <dialog closedby>

모달 대화상자가 열려 있으면 사용자는 키보드의 Esc 키를 누르거나, 모바일 플랫폼에서 뒤로 버튼 또는 동작을 사용하거나, 보조 기술을 사용하여 닫기 동작을 하는 등 익숙한 컨트롤을 사용하여 대화상자를 닫을 수 있을 것으로 기대합니다.

<dialog> 요소가 처음 도입되었을 때는 Esc 키로 닫을 수 있었지만 모바일의 뒤로 버튼/동작과 같은 다른 플랫폼 컨트롤로는 닫을 수 없었습니다. <dialog> 요소에 closedby 속성이 추가됨에 따라, 모달 상태에서 열리는 <dialog> 요소 (즉, JavaScript에서 <dialog> 요소의 showModal() 메서드를 사용하여 명령적으로 열리거나 show-modal 호출자 명령어를 사용하여 선언적으로 열리는 경우)에 대해 닫기 요청에 대한 더 많은 플랫폼별 컨트롤에 응답하는 확장된 동작이 적용되었습니다. 따라서 이미 <dialog> 요소를 사용하고 있다면 개발자가 특별히 변경해야 할 사항은 없습니다.

<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

모달 상태로 열면 closedby 속성이 없는 대화상자는 closedby 속성을 closerequest로 명시적으로 설정하는 것과 동일하게 닫기 요청에 응답합니다.

<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests.</p>
</dialog>

'가벼운 닫기' 동작도 원하는 경우 closedby를 any로 설정해야 합니다.

<dialog closedby="any" aria-labelledby="example">
  <h1 id="example">Example</h1>
  <p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>

대체 전략

모달 상태로 열린 <dialog> 요소는 이미 Esc로 닫을 수 있으므로 대체가 필요하지 않습니다. 모바일 뒤로 버튼/동작에서 닫기 요청을 구현하는 좋은 방법은 없으므로 이 기능을 점진적 개선으로 수용하는 것이 더 간단합니다. 특히 모달 대화상자를 닫는 다른 포괄적인 방법이 있다는 점을 고려하면 더욱 그렇습니다. 마찬가지로 closedby="any"를 사용하는 <dialog> 요소의 가벼운 닫기 동작은 점진적 개선으로 간주할 수 있습니다.