feat: added aria props to picker logic

formwerkjs · Feb 16, 2025 · 390ca1a · 390ca1a
1 parent c318e90
commit 390ca1a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git 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<PickerProps>) {
     return withRefCapture(
       {
         role: 'dialog',
+        'aria-modal': 'true',
+        'aria-label': toValue(props.label),
       },
       pickerEl,
     );
@@ -41,6 +48,7 @@ export function usePicker(_props: Reactivify<PickerProps>) {
 
   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
@@ -16,7 +16,9 @@ const {
   direction,
 } = useDateTimeField(props);
 
-const { pickerProps, pickerTriggerProps } = usePicker({});
+const { pickerProps, pickerTriggerProps } = usePicker({
+  label: 'Pick a date',
+});
 </script>
 
 <template>