diff --git a/packages/core/src/usePicker/usePicker.ts b/packages/core/src/usePicker/usePicker.ts index ed3f866f..68b01fe4 100644 --- a/packages/core/src/usePicker/usePicker.ts +++ b/packages/core/src/usePicker/usePicker.ts @@ -1,4 +1,4 @@ -import { computed, InjectionKey, provide, ref } from 'vue'; +import { computed, InjectionKey, provide, ref, toValue } from 'vue'; import { usePopoverController } from '../helpers/usePopoverController'; import { createDisabledContext } from '../helpers/createDisabledContext'; import { normalizeProps, withRefCapture } from '../utils/common'; @@ -10,6 +10,11 @@ export interface PickerProps { * Whether the picker is disabled. */ disabled?: boolean; + + /** + * The label for the picker. + */ + label: string; } export interface PickerContext { @@ -30,6 +35,8 @@ export function usePicker(_props: Reactivify) { return withRefCapture( { role: 'dialog', + 'aria-modal': 'true', + 'aria-label': toValue(props.label), }, pickerEl, ); @@ -41,6 +48,7 @@ export function usePicker(_props: Reactivify) { const pickerTriggerProps = useControlButtonProps(() => { return { + 'aria-label': toValue(props.label), disabled: disabled.value, onClick: onOpen, }; diff --git a/packages/playground/src/components/DateField.vue b/packages/playground/src/components/DateField.vue index bc5a75c0..b6531eef 100644 --- a/packages/playground/src/components/DateField.vue +++ b/packages/playground/src/components/DateField.vue @@ -16,7 +16,9 @@ const { direction, } = useDateTimeField(props); -const { pickerProps, pickerTriggerProps } = usePicker({}); +const { pickerProps, pickerTriggerProps } = usePicker({ + label: 'Pick a date', +});