Fix error span id & add tests

packages/web-components/src/components.d.ts

@@ -1155,7 +1155,7 @@ export namespace Components {
     }
     interface VaTextarea {
         /**
-          * Whether the component should show a character count message.  Has no effect without uswds and maxlength being set.
+          * Whether the component should show a character count message. Has no effect without uswds and maxlength being set.
          */
         "charcount"?: boolean;
         /**
@@ -3018,7 +3018,7 @@ declare namespace LocalJSX {
     }
     interface VaTextarea {
         /**
-          * Whether the component should show a character count message.  Has no effect without uswds and maxlength being set.
+          * Whether the component should show a character count message. Has no effect without uswds and maxlength being set.
          */
         "charcount"?: boolean;
         /**

packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts

@@ -59,6 +59,7 @@ describe('va-text-input', () => {
     const input = await page.find('va-text-input >>> input');
     expect(error.innerText).toContain('This is a mistake');
     expect(input.getAttribute('aria-invalid')).toEqual('true');
+    expect(input.getAttribute('aria-describedby')).toContain('input-error-message');
   });
 
   it('sets aria-invalid based on invalid prop', async () => {
@@ -385,6 +386,7 @@ describe('va-text-input', () => {
     const input = await page.find('va-text-input >>> input');
     expect(error.innerText).toContain('This is a mistake');
     expect(input.getAttribute('aria-invalid')).toEqual('true');
+    expect(input.getAttribute('aria-describedby')).toContain('input-error-message');
   });
 
   it('uswds sets aria-invalid based on invalid prop', async () => {

packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts

@@ -15,7 +15,7 @@ describe('va-textarea', () => {
           <label for="textarea">
             Describe your situation
           </label>
-          <span id="error-message" role="alert"></span>
+          <span id="input-error-message" role="alert"></span>
           <textarea id="textarea" part="textarea" aria-invalid="false"></textarea>
         </mock:shadow-root>
       </va-textarea>
@@ -27,7 +27,7 @@ describe('va-textarea', () => {
     await page.setContent('<va-textarea error="This is a mistake" />');
 
     // Render the error message text
-    const error = await page.find('va-textarea >>> span#error-message');
+    const error = await page.find('va-textarea >>> span#input-error-message');
     const textarea = await page.find('va-textarea >>> textarea');
     expect(error.innerText).toContain('This is a mistake');
     expect(textarea.getAttribute('aria-invalid')).toEqual('true');
@@ -48,8 +48,9 @@ describe('va-textarea', () => {
 
     // Render the error message text
     const textareaEl = await page.find('va-textarea >>> textarea ');
+    expect(textareaEl.getAttribute('aria-invalid')).toEqual('true');
     expect(textareaEl.getAttribute('aria-describedby')).toContain(
-      'error-message',
+      'input-error-message',
     );
   });
 
@@ -230,6 +231,9 @@ describe('va-textarea', () => {
     const textarea = await page.find('va-textarea >>> textarea');
     expect(error.innerText).toContain('This is a mistake');
     expect(textarea.getAttribute('aria-invalid')).toEqual('true');
+    expect(textarea.getAttribute('aria-describedby')).toContain(
+      'input-error-message',
+    );
   });
 
   it('uswds v3 renders hint text', async () => {
@@ -248,7 +252,7 @@ describe('va-textarea', () => {
     // Render the error message text
     const textareaEl = await page.find('va-textarea >>> textarea ');
     expect(textareaEl.getAttribute('aria-describedby')).toContain(
-      'error-message',
+      'input-error-message',
     );
   });
 

packages/web-components/src/components/va-textarea/va-textarea.tsx

@@ -95,7 +95,7 @@ export class VaTextarea {
   @Prop() uswds?: boolean = false;
 
   /**
-   * Whether the component should show a character count message. 
+   * Whether the component should show a character count message.
    * Has no effect without uswds and maxlength being set.
    */
   @Prop() charcount?: boolean = false;
@@ -154,22 +154,23 @@ export class VaTextarea {
   }
 
   render() {
-    const { 
-      label, 
-      error, 
-      placeholder, 
-      name, 
-      required, 
-      value, 
-      hint, 
-      uswds, 
-      charcount, 
-      messageAriaDescribedby 
+    const {
+      label,
+      error,
+      placeholder,
+      name,
+      required,
+      value,
+      hint,
+      uswds,
+      charcount,
+      messageAriaDescribedby
     } = this;
 
     const maxlength = this.getMaxlength();
-    const ariaDescribedbyIds = `${messageAriaDescribedby ? 'input-message' : ''} ${error ? 'error-message' : ''} 
-    ${charcount && maxlength ? 'charcount-message' : ''}`.trim() || null;
+    const ariaDescribedbyIds = `${error ? 'input-error-message' : ''} ${
+      charcount && maxlength ? 'charcount-message' : ''} ${
+      messageAriaDescribedby ? 'input-message' : ''}`.trim() || null;
 
     if (uswds) {
       const charCountTooHigh = charcount && (value?.length > maxlength);
@@ -239,15 +240,15 @@ export class VaTextarea {
           )}
         </Host>
       );
-    } else {      
+    } else {
       return (
         <Host>
           <label htmlFor="textarea">
             {label}
             {required && <span class="required">{i18next.t('required')}</span>}
             {hint && <span class="hint-text">{hint}</span>}
           </label>
-          <span id="error-message" role="alert">
+          <span id="input-error-message" role="alert">
             {error && (
               <Fragment>
                 <span class="sr-only">{i18next.t('error')}</span> {error}