Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

MonthPicker

MonthPickerは、ユーザーが月を選択するために使用されるコンポーネントです。

ソース@yamada-ui/calendar

MonthPickerは、アクセシビリティに関してWAI-ARIA - Combobox Patternに従います。

FormControlを使用しない場合は、MonthPickerにaria-labelまたはaria-labelledbyを設定します。

<MonthPicker placeholder="YYYY/MM" aria-label="Birthday" />
Copied!
<VStack gap="sm">
  <Heading as="h3" id="label">
    Birthday
  </Heading>


  <MonthPicker placeholder="YYYY/MM" aria-labelledby="label" />
</VStack>
Copied!

キーボード操作

キー説明状態
ArrowUpフォーカスを上のセルに1つ移動します。-
ArrowDownフォーカスを下のセルに1つ移動します。-
ArrowLeftフォーカスを左のセルに1つ移動します。最初のセルの場合は、次の期間の最後のセルをフォーカスします。-
ArrowRightフォーカスを右のセルに1つ移動します。最後のセルの場合は、次の期間の最初のセルをフォーカスします。-
Home最初のセルをフォーカスします。-
End最後のセルをフォーカスします。-
Space, Enterフォーカスしているセルをアクティブにします。-
Escapeダイアログを閉じます。closeOnEsc={true}

ARIAロールと属性

コンポーネントロールと属性使い方
MonthPickerField 内部role="combobox"コンボボックスであることを示します。
aria-haspopup="dialog"ダイアログが存在することを示します。
aria-expandedダイアログが開いている場合は"true"を設定し、閉じている場合は"false"を設定します。
aria-controlsダイアログが開いている場合は関連したColorSelectorのidを設定し、閉じている場合はundefinedを設定します。
aria-readonlyisReadOnlyが設定されている場合は"true"を設定します。
aria-disabledisDisabledが設定されている場合は"true"を設定します。
aria-invalidisInvalidが設定されている場合は"true"を設定します。
aria-requiredisRequiredが設定されている場合は"true"を設定します。
DatePickerClearIcon 内部role="button"ボタンであることを示します。
aria-label"Clear value"を設定します。
Calendar 内部role="dialog"ダイアログであることを示します。
idMonthPickerFieldと関連付けるために使用するid。
aria-hiddenダイアログが開いている場合は"true"を設定し、閉じている場合は"false"を設定します。
CalendarLabel 内部aria-live="polite"フォーカスの外側で更新される可能性があることを示します。
CalendarControlPrev 内部aria-label"Go to previous year"を設定します。
CalendarControlNext 内部aria-label"Go to next year"を設定します。
MonthList 内部role="grid"グリッドであることを示します。
aria-label"2024"のように、選択されている年を設定します。
YearList 内部role="grid"グリッドであることを示します。
aria-label"From 2021 to 2032"のように、年の範囲を設定します。
Button 内部aria-selected項目が選択されている場合は"true"を設定し、未選択の場合は"false"を設定します。
aria-disabled項目が無効の場合は"true"を設定します。

GitHubでこのページを編集する

前TimePicker次YearPicker