Modal

デザインガイドライン

使用法

モーダルは、重要な情報を提供したり、決定を求めたりするために、コンテンツの前に表示される浮動ウィンドウの一種です。モーダルが表示されると、他のすべての機能は無効になります。モーダルは、ユーザーが確認するか、閉じるか、必要なアクションを取るまで画面に表示され続けます。

モーダルは、追加のコントロールや情報を開示する効果的な方法ですが、ユーザーにとって中断の原因にもなり得ます。このため、モーダルが必要かどうかを常に問い、必要な状況を避けるように努めてください。

原則

• 集中。モーダルはユーザーの注意を画面の他の部分から引き離し、モーダルの内容に集中させます。
• 直接的。モーダルのテキストは重要な情報を伝え、ユーザーが適切にタスクを完了するのを助けることに専念すべきです。
• 役立つ。モーダルは、ユーザーのタスクやアクションに応じて関連性のある文脈情報を提供するために表示されるべきです。

使用するタイミング

モーダルは以下のために使用されます：

• 通常の操作を妨げるエラー。
• 特定のユーザータスク、決定、または確認を必要とする重要な情報。
• ユーザーのタスクやアクションに応じて表示される文脈情報。
  

構造

• 1.* コンテナ
• 2.* タイトル
• 3.* 補助テキスト
• 4.* ボタン
• 5.* スクリム
• 6.* 閉じるボタン（オプション）
  

モーダルボックスとスクリム

モーダルはウィンドウの一種です。モーダルが処理されるまで、他のUIへのアクセスは無効になります。すべてのモーダルは設計上中断的であり、その目的はユーザーがコンテンツに集中することです。そのため、モーダルの表面は他のすべての表面の前に表示されます。

モーダルの背後にある表面はスクリムされ、内容を隠すための一時的なオーバーレイがかけられ、目立たなくなります。

タイトル

モーダルの目的は、そのタイトルとボタンのテキストを通じて伝えられます。

すべてのモーダルにはアクセシビリティの理由からタイトルが必要です（contentLabelプロパティを使用して表示されないタイトルを設定できます）。

タイトルは以下の条件を満たすべきです：

• 短く明確な声明または質問を含む
• 謝罪（「中断して申し訳ありません」）、警告（「警告！」）、または曖昧さ（「本当に大丈夫ですか？」）を避ける。

するべきこと

このモーダルのタイトルは具体的な質問を提示し、リクエストの目的を簡潔に説明し、明確なアクションを提供します。

しないべきこと

このモーダルは曖昧さを生み出し、したがって不安を引き起こします — ユーザーはどのように応答すべきか不明確になり、回答を再考させられます。

ボタン

横並びのボタン（推奨）

横並びのボタンは、2つのテキストボタンを隣接して表示します。

スタックまたは全幅ボタン

長いボタンテキストに対応する必要がある場合は、スタックボタンを使用します。常に確認アクションを拒否アクションの上に配置してください。

動作

モーダルは警告なしに表示され、ユーザーは現在のタスクを中断する必要があります。モーダルは控えめに使用するべきです — すべての選択肢や設定がこのような突然の中断を必要とするわけではありません。

位置

モーダルは、閉じられるか、ユーザーが設定を選択するなどのアクションを完了するまでフォーカスを保持します。他の要素によって隠されるべきではなく、画面の一部に表示されるべきではありません。

スクロール

ほとんどのモーダルコンテンツはスクロールを避けるべきです。モーダルの内容がモーダルの高さを超える場合（例：多くの行を持つリストコンポーネント）、スクロールは許可されます。モーダルがスクロールすると、モーダルのタイトルは上部に固定され、ボタンは下部に固定されます。これにより、スクロール中でもタイトルとボタンとともにコンテンツが表示され続けます。

モーダルは、背景などのモーダル外の要素と一緒にスクロールしません。

オプションのスクロール可能なリストを表示する場合、モーダルのタイトルとボタンは固定されたままです。

モーダルの閉じ方

モーダルは以下の3つの方法で閉じることができます：

• モーダルの外をタップする
• 「キャンセル」ボタンをタップする
• 「閉じる」アイコンボタンをタップするか、escキーを押す

ユーザーがモーダルを閉じる能力が無効になっている場合、進むためにはモーダルアクションを選択する必要があります。

開発ガイドライン

モーダルは、アプリケーション上にアクセシブルなモーダルを作成するために使用されます。

注意： このモーダルのAPIは、react-modalに似せて模倣されています。

使用法

以下の例は、モーダルを適切に実装する方法を示しています。モーダルが正しく機能するためには、モーダルの閉じるロジックを適切に実装することが重要です。

import { useState } from 'react';
import { Button, Modal } from '@wordpress/components';
const MyModal = () => {
   const [ isOpen, setOpen ] = useState( false );
   const openModal = () => setOpen( true );
   const closeModal = () => setOpen( false );
   return (
   <>
   <Button variant="secondary" onClick={ openModal }>
   Open Modal
   </Button>
   { isOpen && (
   <Modal title="This is my modal" onRequestClose={ closeModal }>
   <Button variant="secondary" onClick={ closeModal }>
   My custom close button
   </Button>
   </Modal>
   ) }
   </>
   );
};

プロパティ

コンポーネントが受け入れるプロパティのセットは以下に示されます。

このセットに含まれていないプロパティは、入力要素に適用されます。

aria.describedby: string

このプロパティが追加されると、モーダルコンテンツdivにaria-describedbyとして追加されます。

• 必須：いいえ

aria.labelledby: string

このプロパティが追加されると、モーダルコンテンツdivにaria-labelledbyとして追加されます。

モーダルのコンテンツエリア内でタイトルを自分でレンダリングする場合は、titleプロパティを使用してください。これにより、タイトルが支援技術で使用可能になります。

アクセシビリティの理由から、タイトルは必須です。contentLabelおよびtitleを参照して、タイトルを提供する他の方法を確認してください。

• 必須：いいえ
• デフォルト：titleプロパティが提供されている場合、これはtitleをレンダリングする要素のIDにデフォルト設定されます。

bodyOpenClassName: string

モーダルが開いているときにボディ要素に追加されるクラス名。

• 必須：いいえ
• デフォルト：modal-open

className: string

このプロパティが追加されると、モーダルコンテンツdivに追加のクラス名が追加されます。

• 必須：いいえ

contentLabel: string

このプロパティが追加されると、モーダルコンテンツdivにaria-labelとして追加されます。

アクセシビリティの理由から、タイトルは必須です。aria.labelledbyおよびtitleを参照して、タイトルを提供する他の方法を確認してください。

• 必須：いいえ

focusOnMount: boolean | ‘firstElement’ | ‘firstContentElement’

このプロパティがtrueに設定されている場合、モーダル内でレンダリングされた最初のタブ可能な要素にフォーカスが移動します。

このプロパティがfalseに設定されている場合、フォーカスは移動せず、アクセシブルなフォーカスマネジメントを確保するのは消費者の責任です。

`````firstContentElement`````に設定されている場合、モーダルの**コンテンツ**（すなわち子要素）内の最初のタブ可能な要素にフォーカスが置かれます。子要素内に少なくとも1つのタブ可能な要素が存在することを消費者が確保する責任があります**さもなければフォーカスが失われます**。
- 必須：いいえ
- デフォルト：`````true

headerActions

モーダルに関連する追加のアクションや他の要素を含むためのオプションのReactノード。たとえば、ボタンなどです。コンテンツはモーダルの右上隅に表示され、閉じるボタンの左側に表示されます（表示されている場合）。

• 必須：いいえ
• デフォルト：null

isDismissible: boolean

このプロパティがfalseに設定されている場合、モーダルは閉じるアイコンを表示せず、閉じることができません。

• 必須：いいえ
• デフォルト：true

isFullScreen: boolean

このプロパティがtrueに設定されている場合、全画面モーダルがレンダリングされます。

• 必須：いいえ
• デフォルト：false

size: ‘small’ | ‘medium’ | ‘large’ | ‘fill’

このプロパティが追加されると、モーダルはプリセット幅でレンダリングされるか、画面を埋めるように拡張されます。このプロパティは、isFullScreenがtrueに設定されている場合は無視されます。

• 必須：いいえ

注意：Modalの幅は、CSSを介してモーダルの内容の幅を調整することでも制御できます。

onRequestClose: “

この関数は、モーダルを閉じるべきであることを示すために呼び出されます。

• 必須：はい

overlayClassName: string

このプロパティが追加されると、モーダルオーバーレイdivに追加のクラス名が追加されます。

• 必須：いいえ

role: AriaRole

このプロパティが追加されると、モーダルのデフォルトの役割が上書きされます。

• 必須：いいえ
• デフォルト：dialog

shouldCloseOnClickOutside: boolean

このプロパティが追加されると、モーダルコンテンツの外でマウスクリックが発生したときにモーダルが閉じるようリクエストするかどうかが決まります。

• 必須：いいえ
• デフォルト：true

shouldCloseOnEsc: boolean

このプロパティが追加されると、エスケープキーが押されたときにモーダルが閉じるようリクエストするかどうかが決まります。

• 必須：いいえ
• デフォルト：true

style: CSSProperties

このプロパティが追加されると、モーダルフレームdivに追加されます。

• 必須：いいえ

title: string

このプロパティはモーダルヘッダーのタイトルとして使用されます。

アクセシビリティの理由から、タイトルは必須です。aria.labelledbyおよびcontentLabelを参照して、タイトルを提供する他の方法を確認してください。

• 必須：いいえ

__experimentalHideHeader: boolean

このプロパティがtrueに設定されている場合、モーダルのヘッダー（アイコン、タイトル、閉じるボタンを含む）はレンダリングされません。

警告：このプロパティはまだ実験的です。「実験的」とは、これは大幅な変更や破壊的な変更の対象となる初期実装を意味します。

• 必須：いいえ
• デフォルト：false
  

関連コンポーネント

• 中程度の重要性のメッセージでユーザーに通知するには、Noticeを使用してください。