feat(text-input): setup id & label association

src/components/CvTextInput/CvTextInput.vue

@@ -6,13 +6,14 @@
       `${carbonPrefix}--text-input-wrapper`,
     ]"
   >
-    <label :class="[`${carbonPrefix}--label`]">
+    <label :for="cvId" :class="[`${carbonPrefix}--label`]">
       {{ label }}
     </label>
     <div :class="[`${carbonPrefix}--text-input__field-wrapper`]">
       <input
         :class="[`${carbonPrefix}--text-input`]"
         type="text"
+        :id="cvId"
         :value="modelValue"
         @input="$event => $emit('update:modelValue', $event.target.value)"
       />
@@ -22,11 +23,14 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
 
 const props = defineProps({
   label: String,
   modelValue: String,
+  ...propsCvId,
 });
 
+const cvId = useCvId(props);
 const emit = defineEmits(['update:modelValue']);
 </script>

src/components/CvTextInput/__tests__/CvTextInput.spec.js

@@ -36,4 +36,14 @@ describe('CvTextInput', () => {
     const input = container.querySelector('input');
     expect(input.value).toBe(dummyInitialText);
   });
+
+  it('associates label & native input', async () => {
+    const dummyLabel = 'Dummy Label';
+    const { getByLabelText } = render(CvTextInput, {
+      props: { label: dummyLabel },
+    });
+
+    const input = getByLabelText(dummyLabel);
+    expect(input).toBeDefined();
+  });
 });