fix(kinput): add aria label to associate helper text with input [KHCP…

…-11030] (#2138)

* fix(kinput): add aria label to associate helper text with input [KHCP-11030]

* fix(kinput): always generate helpTextID but only assign when helpText exists

src/components/KInput/KInput.vue

@@ -35,6 +35,7 @@
       <!-- TODO: [beta] change input class to text-input -->
       <input
         v-bind="modifiedAttrs"
+        :aria-describedby="helpText ? helpTextId : undefined"
         :aria-invalid="error || hasError || charLimitExceeded ? 'true' : undefined"
         class="k-input"
         :value="getValue()"
@@ -56,6 +57,7 @@
     >
       <p
         v-if="helpText"
+        :id="helpTextId"
         :key="String(helpTextKey)"
         class="help-text"
       >
@@ -144,6 +146,7 @@ const attrs = useAttrs()
 
 const isRequired = computed((): boolean => attrs?.required !== undefined && String(attrs?.required) !== 'false')
 const inputId = computed((): string => attrs.id ? String(attrs.id) : uuidv4())
+const helpTextId = uuidv4()
 const strippedLabel = computed((): string => stripRequiredLabel(props.label, isRequired.value))
 const hasLabelTooltip = computed((): boolean => !!(props.labelAttributes?.info || slots['label-tooltip']))