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