RadioCard
RadioCardは、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。
RadioCardは、アクセシビリティに関してWAI-ARIA - Radio Patternに従います。
Fieldsetを使用しない場合は、RadioCardGroupにaria-labelまたはaria-labelledbyを設定します。
const items = useMemo<RadioCardItem[]>(() => [{ label: "ビアンカ", value: "ビアンカ" },{ label: "フローラ", value: "フローラ" },{ label: "ルドマン", value: "ルドマン" },],[],)return <RadioCardGroup items={items} aria-label="キャラクター" />
const items = useMemo<RadioCardItem[]>(() => [{ label: "ビアンカ", value: "ビアンカ" },{ label: "フローラ", value: "フローラ" },{ label: "ルドマン", value: "ルドマン" },],[],)return (<VStack gap="sm"><Text as="h3" id="label">キャラクター</Text><RadioCardGroup items={items} aria-labelledby="label" /></VStack>)
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
Tab | ラジオグループ内のチェックされたラジオボタンをフォーカスします。ラジオボタンがチェックされていない場合は、最初のラジオボタンをフォーカスします。 | - |
Space | フォーカスされたラジオボタンをチェックします。 | - |
ArrowLeft | 無効ではない前のラジオボタンをチェックします。 | - |
ArrowRight | 無効ではない次のラジオボタンをチェックします。 | - |
ArrowUp | 無効ではない前のラジオボタンをチェックします。 | - |
ArrowDown | 無効ではない次のラジオボタンをチェックします。 | - |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
RadioCardGroup | role="radiogroup" | ラジオグループであることを示します。 |
aria-labelledby | RadioCardGroupがFormControl内にあり、FormControlにlabelまたはLabelが設定されている場合は、そのidを設定します。 | |
RadioCard | aria-checked | ラジオボタンがチェックされている場合は"true"を設定し、チェックされていない場合は"false"を設定します。 |
GitHubでこのページを編集する