Dialog
モーダルダイアログです。fandhe-frontend-headless-ui の dialog mod は Root / Trigger / Backdrop / Positioner / Content / Title / Description / CloseTrigger の 8 anatomy パーツと、DialogRole（Dialog/Alertdialog）で 切り替えられる role・aria-modal・aria-haspopup="dialog" を提供します。 フォーカストラップ・Escape キーでの閉鎖・外側クリックでの閉鎖は JS ランタイム 側の責務としてスコープ外であり、本部品は SSR での属性出力のみを担います。
スタイル済みの表示例は Dialog を参照してください。
関連 API: fandhe-frontend-headless-ui API
Demo
枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。
Confirm action
This cannot be undone.
Features
- Root / Trigger / Backdrop / Positioner / Content / Title / Description / CloseTrigger の 8 anatomy パーツと、Disclosure を埋め込んだ開閉状態機械 Dialog を提供する（dispatch: open/close/toggle）。
- trigger は type="button" を固定付与し、aria-haspopup="dialog" を常に付与する。
- content は DialogRole（Dialog/Alertdialog）で role を切り替えられ、modal 引数で aria-modal の値を制御できる。
- backdrop/positioner は closed のとき hidden 存在属性を付与し、JS なしの SSR でも閉状態を表現する。
- フォーカストラップ・Escape キー閉鎖・外側クリック閉鎖は JS ランタイム側の責務としてスコープ外（SSR/属性出力のみ）。
Anatomy
trigger
root
backdrop
positioner
content
title
description
close-triggerAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| root: state | OpenState | Closed | ダイアログ全体の開閉状態（data-state へ反映）。 |
| trigger: state | OpenState | Closed | aria-expanded/data-state へ反映される開閉状態。 |
| trigger: controls | Option<&str> | Some のとき aria-controls で content と関連付ける。 | |
| backdrop: state | OpenState | Closed | closed のとき hidden 存在属性を付与する背面レイヤーの開閉状態。 |
| positioner: state | OpenState | Closed | closed のとき hidden 存在属性を付与する配置ラッパーの開閉状態。 |
| content: state | OpenState | Closed | 開閉状態（closed のとき hidden 存在属性を付与）。 |
| content: role_kind | DialogRole | role 属性の値（Dialog="dialog" / Alertdialog="alertdialog"）。 | |
| content: modal | bool | aria-modal へ反映する値。 | |
| content: ids | ContentIds | ContentIds::default() | content 自身の id・aria-labelledby・aria-describedby をまとめた構造体（各フィールドが Some のときのみ対応する属性を出力）。 |
| title: id | Option<&str> | content の labelledby と対で aria-labelledby 関連付けを成立させる。 | |
| description: id | Option<&str> | content の describedby と対で aria-describedby 関連付けを成立させる。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| backdrop | data-state | open |
| content | data-state | open |
| positioner | data-state | open |
| root | data-state | open |
| trigger | data-state | open |
Examples
Alert dialog (non-modal)
DialogRole::Alertdialog + modal=false の組み合わせで、role="alertdialog" かつ aria-modal="false" を出力する例です。
Delete this item?
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-haspopup="dialog" | trigger に固定付与。 |
| aria-expanded | trigger に付与。開閉状態を反映する。 |
| aria-controls | trigger に付与。controls が Some のとき content と関連付ける。 |
| aria-hidden="true" | backdrop に固定付与（装飾層のため読み上げ対象外）。 |
| role="dialog" / role="alertdialog" | content に付与。role_kind の値を反映する。 |
| aria-modal | content に付与。modal 引数の値を反映する。 |
| aria-labelledby / aria-describedby | content に付与。ids.labelledby/ids.describedby が Some のときのみ出力される。 |