feat(TextInput): Use the aria-errormessage to associate the error message with the input

Author: jackdomleo7

src/components/TextInput/TextInput.mdx

@@ -206,4 +206,6 @@ This component will take up the full width of the parent component by default. Y
 
 This component uses native HTML behaviour for `<input />` elements. This means that it will be keyboard navigable and screen reader friendly out of the box.
 
-`aria-describedby` is added to the `<input />` element when the `description` and/or the `error` slots are used to associate this content with the input.
+`aria-describedby` is added to the `<input />` element when the `description` slot is used to associate this content with the input.
+
+`aria-errormessage` is added to the `<input />` element when the `error` slot is used to associate this content with the input.

src/components/TextInput/TextInput.spec.ts

@@ -293,7 +293,7 @@ describe('TextInput', () => {
     // Assert
     expect(wrapper.find('.j-textinput__error').exists()).toBe(true);
     expect(wrapper.find('.j-textinput__error').html()).toContain('This is an error message');
-    expect(wrapper.find('input').attributes('aria-describedby')).toContain('test-id-error');
+    expect(wrapper.find('input').attributes('aria-errormessage')).toContain('test-id-error');
   });
 
   it('renders a description message', () => {

src/components/TextInput/TextInput.vue

@@ -12,7 +12,8 @@
         :type="type"
         :value="modelValue"
         :aria-invalid="status === 'error' ? 'true' : status === 'success' ? 'false' : undefined"
-        :aria-describedby="[$slots.error ? `${id}-error` : '', $slots.description ? `${id}-description` : ''].filter(Boolean).join(' ') || undefined"
+        :aria-errormessage="$slots.error ? `${id}-error` : undefined"
+        :aria-describedby="$slots.description ? `${id}-description` : undefined"
         @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
       />
       <span v-if="status" class="j-textinput__validation-icon" aria-hidden="true"><template v-if="status === 'error'">✘</template><template v-if="status === 'success'">✔</template></span>