Rating
Ratingは、ユーザーがアイテムに対して評価を行うためのUI要素で、星やハートなどのアイコンで提供され、ユーザーが選択した評価を視覚的に表示するコンポーネントです。
Ratingは、アクセシビリティに関してWAI-ARIA - Radio Group Patternに従います。
Ratingにaria-labelまたはaria-labelledbyを設定すると、スクリーンリーダーによって読み上げられます。
<Rating aria-label="Rating" />
<VStack gap="sm"><Heading as="h3" id="label">Rating</Heading><Rating aria-labelledby="label" /></VStack>
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
Tab | 選択された項目をフォーカスします。項目が選択されていない場合は、最初の項目をフォーカスします。 | - |
ArrowLeft, ArrowUp | 前の項目をフォーカスして選択します。最初の項目の場合は、最後の項目をフォーカスして選択します。以前に選択されていた項目は、未選択にします。 | - |
ArrowRight, ArrowDown | 次の項目をフォーカスして選択します。最後の項目の場合は、最初の項目をフォーカスして選択します。以前に選択されていた項目は、未選択にします。 | - |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
Rating | role="radiogroup" | ラジオグループであることを示します。 |
aria-label | 選択されたアイテムの数を示します。 | |
aria-readonly | isReadOnlyが設定されている場合は"true"を設定します。 | |
aria-disabled | isDisabledが設定されている場合は"true"を設定します。 | |
RatingItem | aria-label | valueを設定します。 |
RatingIcon 内部 | aria-hidden="true" | RatingIconをアクセシビリティツリーから除外します。 |
GitHubでこのページを編集する