feat(text-area): binds component attributes to native textarea

src/components/CvTextArea/CvTextArea.vue

@@ -5,9 +5,10 @@
     </label>
     <div :class="`${carbonPrefix}--text-area__wrapper`">
       <textarea
+        :id="cvId"
         :class="[`${carbonPrefix}--text-area`]"
+        v-bind="$attrs"
         :value="modelValue"
-        :id="cvId"
         @input="$event => $emit('update:modelValue', $event.target.value)"
       ></textarea>
     </div>
@@ -26,3 +27,9 @@ const props = defineProps({
 
 const cvId = useCvId(props);
 </script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

src/components/CvTextArea/__tests__/CvTextArea.spec.js

@@ -46,4 +46,27 @@ describe('CvTextArea', () => {
     const textarea = getByLabelText(dummyLabel);
     expect(textarea).toBeDefined();
   });
+
+  describe('Attribute & event binding', () => {
+    it('binds attributes to native textarea', async () => {
+      const dummyName = 'dummy-name';
+      const { container } = render(CvTextArea, {
+        attrs: { name: dummyName },
+      });
+
+      const textarea = container.querySelector('textarea');
+      expect(textarea.getAttribute('name')).toBe(dummyName);
+      expect(container.firstChild.getAttribute('name')).not.toBe(dummyName);
+    });
+
+    it('does not overwrite native textarea value if attribute value is set', async () => {
+      const dummyValue = 'Dummy Value';
+      const { container } = render(CvTextArea, {
+        attrs: { value: dummyValue },
+      });
+
+      const textarea = container.querySelector('textarea');
+      expect(textarea.value).toBe('');
+    });
+  });
 });