プラットフォーム コントロールのダイアログを閉じる

ウェブ機能: <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> 要素のライトディスミス動作は、プログレッシブ エンハンスメントと見なすことができます。