メッセージへユーザーをフォーカスさせるためのダイアログ

Example#

Props#

NameTypeDefaultDescription
header
optional
string-プライマリーアクションボタンのラベル
onClose
required
() => void-閉じるアクションが実行された場合のコールバック
closeLabelstring閉じる閉じるボタンのラベル
overlayOpacity"normal" | "darker"normalオーバーレイの透過度
fixedHeightbooleanfalse画面を占有する高さで固定するかどうか
openbooleantrueモーダルダイアログを開くかどうか
isStaticbooleanfalseopenを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
id
optional
string-ネイティブ要素のid属性。ページで固有のIDを指定
ariaLabelledby
optional
string-ネイティブのaria-labelledby属性。独自の見出しを実装する場合にダイアログとの紐づけに使用。ページで固有のIDを指定
hero
optional
ReactNode-ヒーローエリア(見出しの更に上)に配置するコンテンツ
stickyHeader
optional
boolean-ヘッダーを固定表示 heroが指定されている場合は無効
stickyFooter
optional
boolean-フッターを固定表示
data-*
optional
string-Custom data attributes

Feature#

  • 確実に読ませたいコンテンツを表示
  • ユーザーの操作を中断させるため、アンチパターンです。利用は熟考してください
    • 条件反射でユーザーが表示されたダイアログを閉じてしまうケースがあります
  • 画面上下を専有してモーダルを表示したい場合は、<MessageHalfModal>を利用してください

Usage#

モーダルダイアログは必要?#

一般に、モーダルダイアログは次のような用途で使用されます。

  • ページの内容とは別のコンテンツを表示・操作する必要がある場合
  • 作業の確認(編集・削除・送信など)を促す場合
  • 重要なメッセージや警告を表示する場合

まず、モーダルダイアログが本当に必要かを検討してください。ページとしてUIを表現することが基本です。
Webの重要な要素として「URLが発行されLinkableであること」が挙げられます。しかし、モーダルダイアログは基本的にURLが発行されません。

  • ブラウザの戻るボタンに対応しない
  • 例えば管理画面ではURLをマニュアルに記載したいケースがある

など、URLがないことのデメリットが存在します。

モーダルダイアログは「モーダル」の名前の通り、ある特定のモードにユーザーを閉じ込めます。強制的にユーザーの作業が中断されるため、乱用は避ける必要があります。

また、複雑な操作や大量のコンテンツを扱うことには向いていません(デフォルトで領域が狭いため)。そういったケースではページとして分割することを検討してください。

基本的にモーダルダイアログはアンチパターンです。

Header Text#

冗長な表記は避け、なるべく簡潔で具体的に書いてください。ヘッダーテキストでそのモーダルダイアログの目的を理解できる内容としましょう。 モバイル環境では2行、それより大きなデバイスでは1行に収まるようにします。

コンテンツの確認を促す文言や内容を端的に要約した文言をタイトルに設定します。

header and aria-labelledby#

  • header propに渡されたテキストは、aria-labelledby属性を通してダイアログ自体を説明するラベルとなります。
    • 特にスクリーンリーダーユーザーにとって意味のあるものとなります
  • headerpropを使わない場合、モーダルのariaLabelledby prop と見出しとして扱う要素のid属性に共通の文字列を指定し紐づけを行ってください
    • custom headerのExampleを参考にしてください