条件付きセクションRevealSectionExperimental
State-driven conditional section: show or hide a fieldset on `open` and reveal it as a properly-labelled, screen-reader-announced region. For declaration forms where sections appear based on prior answers (配偶者控除, conditional panels).
プレビュー
状態とバリエーション
RevealSection が持つ口は open・label・announce の3つだけで、残りは素の div と同じ属性です。変わるのは見た目ではなく、出てきた節にどう名前を付け、それを読み上げに知らせるかどうかです。
読み上げに知らせない出し入れ
announce={false} にすると aria-live が外れます。新しく答えることが増えたわけではなく、いま見ている数字の内訳を開いただけ、という場面ではこちらです。名前（label）は残るので、あとから辿り着いたときには節として読めます。
画面にある見出しを名前にする
節の中に見出しを置くなら、label で同じ言葉をもう一度書くのではなく aria-labelledby でその見出しを指します。名前が2つに割れず、見出しの文言を直したときに読み上げも一緒に直ります。
答えが次の答えを開く
節の中にもう一段の節を置けます。open がそれぞれ別の答えを見ているので、最初のチェックを外せば内側も一緒に消えます。申告書や配送の指定のように、条件が枝分かれする入力はこの形になります。
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| open | boolean | - | Whether the section is shown. When false, nothing renders. |
| label | string | - | Accessible name for the revealed region (or pass aria-labelledby). |
| announce | boolean | true | Announce the section politely to screen readers when it appears. |
| ...HTMLAttributes | — | - | className, aria-labelledby, etc. |
Usage
"use client";
import { RevealSection, Switch } from "@gunjo/ui"
export function Example() {
const [hasSpouse, setHasSpouse] = React.useState(false)
return (
<>
<Switch checked={hasSpouse} onCheckedChange={setHasSpouse} aria-label="配偶者あり" />
<RevealSection open={hasSpouse} label="配偶者控除の申告">
{/* fields revealed (and announced) when hasSpouse is true */}
</RevealSection>
</>
)
}