@nexdom/uimed-vue 2.0.0-beta.27 → 2.0.0-beta.28

package/dist/components.js

@@ -1366,6 +1366,15 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/composables/inputs/date-time-field.ts
 /**
+* The menu's content is a dialog with the pickers. `aria-owns` is removed since the input can't
+* own the content, and the menu still adds `aria-expanded` and `aria-controls`.
+*/
+const activatorProps = {
+	role: "combobox",
+	"aria-haspopup": "dialog",
+	"aria-owns": void 0
+};
+/**
 * Extracts the date part (`YYYY-MM-DD`) of a value, or an empty string when
 * the type has no date.
 */
@@ -1423,6 +1432,31 @@ function useDateTimeFieldPickerBounds(props, selectedDate) {
 		};
 	});
 }
+/**
+* Makes the field's input the activator of the pickers' menu, so the menu's attributes are on an
+* element whose role accepts them.
+* @param isOpen - Whether the menu is open.
+* @param isDisabled - Whether the menu can't open, as when the field is disabled or readonly.
+* @param hasLabel - Whether the field has a label, which names the menu's dialog.
+*/
+function useDateTimeFieldMenu(isOpen, isDisabled, hasLabel) {
+	const inputId = useId();
+	const activator = computed(() => toValue(isDisabled) ? void 0 : `#${inputId}`);
+	const contentProps = computed(() => ({
+		role: "dialog",
+		"aria-labelledby": toValue(hasLabel) ? `${inputId}-label` : void 0
+	}));
+	function open() {
+		if (!toValue(isDisabled)) isOpen.value = true;
+	}
+	return {
+		inputId,
+		activator,
+		activatorProps,
+		contentProps,
+		open
+	};
+}
 function getTimeBound(bound, type, selectedDate) {
 	if (type === "datetime" && getDatePart(bound, type) !== selectedDate) return "";
 	return getTimePart(bound, type);
@@ -1518,6 +1552,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 		const draftTime = computed(() => draft.value.time ?? getTimePart(modelValue.value, props.type));
 		const draftValue = computed(() => joinDateTime(props.type, draftDate.value, draftTime.value));
 		const bounds = useDateTimeFieldPickerBounds(props, draftDate);
+		const { inputId, activator, activatorProps, contentProps, open: openMenu } = useDateTimeFieldMenu(isMenuOpen, isMenuDisabled, () => !!props.label);
 		watch(isMenuOpen, () => {
 			draft.value = {};
 		});
@@ -1541,6 +1576,7 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VTextField), {
+				id: unref(inputId),
 				"model-value": displayValue.value,
 				"validation-value": modelValue.value,
 				variant: unref(vuetifyVariant),
@@ -1554,13 +1590,17 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				hint: props.hint,
 				clearable: isClearable.value,
 				readonly: "",
-				"onClick:clear": clear
+				"onClick:clear": clear,
+				"onClick:control": unref(openMenu)
 			}, {
 				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
 				default: withCtx(() => [createVNode(unref(VMenu), {
 					modelValue: isMenuOpen.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
-					activator: "parent",
+					activator: unref(activator),
+					target: "parent",
+					"activator-props": unref(activatorProps),
+					"content-props": unref(contentProps),
 					location: "bottom start",
 					"min-width": "0",
 					disabled: isMenuDisabled.value,
@@ -1600,9 +1640,16 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 						_: 1
 					})]),
 					_: 1
-				}, 8, ["modelValue", "disabled"])]),
+				}, 8, [
+					"modelValue",
+					"activator",
+					"activator-props",
+					"content-props",
+					"disabled"
+				])]),
 				_: 1
 			}, 8, [
+				"id",
 				"model-value",
 				"validation-value",
 				"variant",
@@ -1614,7 +1661,8 @@ var date_time_field_default = /* @__PURE__ */ defineComponent({
 				"label",
 				"placeholder",
 				"hint",
-				"clearable"
+				"clearable",
+				"onClick:control"
 			]);
 		};
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.28",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",