pkp/pkp-lib#10624 inputId & describedBy adjustments

pkp · Dec 5, 2024 · af6a5e2 · af6a5e2
1 parent 2194c5f
commit af6a5e2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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(() => ({