From af6a5e21f975d5a90670c2b237a08e8b62bbaf3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 5 Dec 2024 15:59:42 +0100
Subject: [PATCH] pkp/pkp-lib#10624 inputId & describedBy adjustments

---
 src/components/Form/fields/Autosuggest.vue          | 13 ++++++-------
 src/components/Form/fields/FieldBaseAutosuggest.vue |  3 ++-
 src/components/Form/fields/FieldRorAutosuggest.vue  |  9 +++++++--
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Form/fields/Autosuggest.vue b/src/components/Form/fields/Autosuggest.vue
index 2da1184b..2426c967 100644
--- a/src/components/Form/fields/Autosuggest.vue
+++ b/src/components/Form/fields/Autosuggest.vue
@@ -156,20 +156,19 @@ const props = defineProps({
 		type: Boolean,
 		default: () => true,
 	},
-	/* Prefix of the input's parent container and its label */
-	controlPrefixId: {
-		type: String,
-		default: () => 'default-autosuggest',
-	},
+	/** Field input id, usually used to connect with FormFieldLabel  */
+	inputId: {type: String, required: false, default: null},
+	/** aria-describedby ids */
+	describedBy: {type: String, required: false, default: ''},
 });
 
 /**
  * Props to pass to the input field
  */
 const inputProps = {
-	'aria-describedby': `${props.controlPrefixId}-selected`,
+	'aria-describedby': `${props.describedBy}`,
 	class: 'pkpAutosuggest__input',
-	id: `${props.controlPrefixId}-control`,
+	id: props.inputId,
 	disabled: props.isDisabled,
 };
 
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index 8fdf1777..8d4ca04d 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -255,7 +255,8 @@ export default {
 				selectedLabel: this.selectedLabel,
 				currentSelected: this.currentSelected,
 				isDisabled: this.isDisabled,
-				controlPrefixId: this.compileId(),
+				inputId: this.controlId,
+				describedBy: this.describedByIds,
 			};
 		},
 	},
diff --git a/src/components/Form/fields/FieldRorAutosuggest.vue b/src/components/Form/fields/FieldRorAutosuggest.vue
index 5eb747cb..8ece34fe 100644
--- a/src/components/Form/fields/FieldRorAutosuggest.vue
+++ b/src/components/Form/fields/FieldRorAutosuggest.vue
@@ -7,7 +7,7 @@
 	>
 		<div class="relative mt-1 w-full">
 			<div
-				:id="autoSuggestProps.inputDescribedByIds"
+				:id="autosuggestContainerId"
 				ref="values"
 				class="pkpAutosuggest__inputWrapper pkpFormField__input"
 				:class="{
@@ -54,16 +54,20 @@ import {ref, watch, computed} from 'vue';
 import Autosuggest from './Autosuggest.vue';
 import Icon from '@/components/Icon/Icon.vue';
 import {useFetch} from '@/composables/useFetch';
+import {useId} from '@/composables/useId';
+
+const {generateId} = useId();
 
 const currentSelected = ref([]);
 const inputValue = ref('');
 const isFocused = ref(false);
-
 const url = 'https://api.ror.org/v2/organizations';
 const queryParams = computed(() => ({
 	query: inputValue.value,
 }));
 
+const autosuggestContainerId = generateId();
+
 const {
 	data: suggestions,
 	isLoading,
@@ -76,6 +80,7 @@ const staticProps = {
 	id: 'default-autosuggest-autosuggest',
 	selectedLabel: 'Selected',
 	isMultiple: false,
+	describedBy: autosuggestContainerId,
 };
 
 const autoSuggestProps = computed(() => ({