Add description id to aria-describedby

department-of-veterans-affairs · Aug 25, 2023 · 2e4f091 · 2e4f091
1 parent 57ab8db
commit 2e4f091
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 19 deletions.
diff --git a/packages/web-components/assets/arrow-both.svg b/packages/web-components/assets/arrow-both.svg
diff --git a/packages/web-components/assets/check.svg b/packages/web-components/assets/check.svg
diff --git a/packages/web-components/assets/green-check.svg b/packages/web-components/assets/green-check.svg
diff --git a/packages/web-components/assets/icon-dot-gov.svg b/packages/web-components/assets/icon-dot-gov.svg
diff --git a/packages/web-components/assets/icon-https.svg b/packages/web-components/assets/icon-https.svg
diff --git a/packages/web-components/assets/minus.svg b/packages/web-components/assets/minus.svg
diff --git a/packages/web-components/assets/plus.svg b/packages/web-components/assets/plus.svg
diff --git a/packages/web-components/assets/sort-arrow-down.svg b/packages/web-components/assets/sort-arrow-down.svg
diff --git a/packages/web-components/assets/sort-arrow-up.svg b/packages/web-components/assets/sort-arrow-up.svg
diff --git a/packages/web-components/assets/sprite.svg b/packages/web-components/assets/sprite.svg
diff --git a/packages/web-components/src/components/va-checkbox/test/va-checkbox.e2e.ts b/packages/web-components/src/components/va-checkbox/test/va-checkbox.e2e.ts
@@ -30,9 +30,10 @@ describe('va-checkbox', () => {
     await page.setContent(
       '<va-checkbox error="Something went horribly wrong" />',
     );
-    const element = await page.find('va-checkbox >>> #error-message');
+    const element = await page.find('va-checkbox >>> #checkbox-error-message');
     const input = await page.find('va-checkbox >>> input');
     expect(input.getAttribute('aria-invalid')).toEqual('true');
+    expect(input.getAttribute('aria-describedby')).toEqual('checkbox-error-message');
     expect(element.textContent).toContain('Something went horribly wrong');
   });
 
@@ -58,7 +59,9 @@ describe('va-checkbox', () => {
       '<va-checkbox><p slot="description">This is a description!</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
+    const inputEl = await page.find('va-checkbox >>> input');
     expect(element).toEqualText('This is a description!');
+    expect(inputEl.getAttribute('aria-describedby')).toEqual('description');
   });
 
   // This test fails, but is here as documentation. The unknown slot and unnamed
@@ -79,10 +82,12 @@ describe('va-checkbox', () => {
       '<va-checkbox description="Description prop"><p slot="description">Slotted description</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
+    const inputEl = await page.find('va-checkbox >>> input');
     expect(element.shadowRoot.textContent).toContain('Description prop');
     expect(
       await page.find('va-checkbox >>> slot[name="description"]'),
     ).toBeNull();
+    expect(inputEl.getAttribute('aria-describedby')).toEqual('description');
   });
 
   it('adds new aria-describedby for error message', async () => {
@@ -91,7 +96,7 @@ describe('va-checkbox', () => {
 
     // Render the error message text
     const inputEl = await page.find('va-checkbox >>> input');
-    expect(inputEl.getAttribute('aria-describedby')).toContain('error-message');
+    expect(inputEl.getAttribute('aria-describedby')).toContain('checkbox-error-message');
   });
 
   it('adds aria-describedby input-message id', async () => {
@@ -103,6 +108,19 @@ describe('va-checkbox', () => {
     expect(inputEl.getAttribute('aria-describedby')).toContain('input-message');
   });
 
+  it('adds aria-describedby input-message, checkbox-error-message and description ids', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<va-checkbox error="Something went horribly wrong" message-aria-describedby="This is a message">
+         <p slot="description">Slotted description</p>
+      </va-checkbox>`,
+    );
+
+    // Render the error message text
+    const inputEl = await page.find('va-checkbox >>> input');
+    expect(inputEl.getAttribute('aria-describedby')).toEqual('input-message checkbox-error-message description');
+  });
+
   it('passes an aXe check', async () => {
     const page = await newE2EPage();
 
@@ -157,6 +175,7 @@ describe('va-checkbox', () => {
         required: false,
       },
     });
+    expect(inputEl.getAttribute('aria-describedby')).toEqual('description');
   });
 
   it("doesn't fire an analytics event when enableAnalytics is false", async () => {
@@ -263,6 +282,7 @@ describe('va-checkbox', () => {
     const element = await page.find('va-checkbox >>> #checkbox-error-message');
     const input = await page.find('va-checkbox >>> input');
     expect(input.getAttribute('aria-invalid')).toEqual('true');
+    expect(input.getAttribute('aria-describedby')).toEqual('checkbox-error-message');
     expect(element.textContent).toContain('Something went horribly wrong');
   });
 
@@ -287,7 +307,9 @@ describe('va-checkbox', () => {
       '<va-checkbox uswds><p slot="description">This is a description!</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
+    const inputEl = await page.find('va-checkbox >>> input');
     expect(element).toEqualText('This is a description!');
+    expect(inputEl.getAttribute('aria-describedby')).toEqual('description');
   });
 
   it('uswds v3 should prefer rendering the description prop over the slotted element', async () => {
@@ -296,10 +318,12 @@ describe('va-checkbox', () => {
       '<va-checkbox uswds description="Description prop"><p slot="description">Slotted description</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
+    const inputEl = await page.find('va-checkbox >>> input');
     expect(element.shadowRoot.textContent).toContain('Description prop');
     expect(
       await page.find('va-checkbox >>> slot[name="description"]'),
     ).toBeNull();
+    expect(inputEl.getAttribute('aria-describedby')).toEqual('description');
   });
 
   it('uswds v3 adds new aria-describedby for error message', async () => {
@@ -320,6 +344,19 @@ describe('va-checkbox', () => {
     await axeCheck(page);
   });
 
+  it('uswds v3 adds aria-describedby input-message, checkbox-error-message and description ids', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<va-checkbox uswds error="Something went horribly wrong" message-aria-describedby="This is a message">
+         <p slot="description">Slotted description</p>
+      </va-checkbox>`,
+    );
+
+    // Render the error message text
+    const inputEl = await page.find('va-checkbox >>> input');
+    expect(inputEl.getAttribute('aria-describedby')).toEqual('input-message checkbox-error-message description');
+  });
+
   it('uswds v3 fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(

diff --git a/packages/web-components/src/components/va-checkbox/va-checkbox.tsx b/packages/web-components/src/components/va-checkbox/va-checkbox.tsx
@@ -165,20 +165,23 @@ export class VaCheckbox {
   }
 
   render() {
-    const { 
-      error, 
-      label, 
-      required, 
-      description, 
-      checked, 
-      hint, 
+    const {
+      error,
+      label,
+      required,
+      description,
+      checked,
+      hint,
       tile,
-      uswds, 
-      checkboxDescription, 
-      disabled, 
+      uswds,
+      checkboxDescription,
+      disabled,
       messageAriaDescribedby,
     } = this;
 
+
+    const hasDescription = description || !!this.el.querySelector('[slot="description"]');
+
     if (uswds) {
       const inputClass = classnames({
         'usa-checkbox__input': true,
@@ -188,11 +191,15 @@ export class VaCheckbox {
         'usa-legend': true,
         'usa-label--error': error
       });
-      const ariaDescribedbyIds = `${messageAriaDescribedby ? 'input-message' : ''} ${error ? 'checkbox-error-message' : ''}`
-      .trim() || null; // Null so we don't add the attribute if we have an empty string
+      const ariaDescribedbyIds = [
+        messageAriaDescribedby ? 'input-message' : '',
+        error ? 'checkbox-error-message' : '',
+        hasDescription ? 'description' : '',
+        // Return null so we don't add the attribute if we have an empty string
+      ].filter(Boolean).join(' ').trim() || null;
       return (
         <Host>
-          {description ? 
+          {description ?
             <legend id="description" class={descriptionClass}>{description}</legend> :
             <slot name="description" />
           }
@@ -201,7 +208,7 @@ export class VaCheckbox {
           <span id="checkbox-error-message" role="alert">
             {error && (
               <Fragment>
-                <span class="usa-sr-only">{i18next.t('error')}</span> 
+                <span class="usa-sr-only">{i18next.t('error')}</span>
                 <span class="usa-error-message">{error}</span>
               </Fragment>
             )}
@@ -231,15 +238,19 @@ export class VaCheckbox {
         </Host>
       );
     } else {
-      const ariaDescribedbyIds = `${messageAriaDescribedby ? 'input-message' : ''} ${error ? 'error-message' : ''}`
-      .trim() || null; // Null so we don't add the attribute if we have an empty string
+      const ariaDescribedbyIds = [
+        messageAriaDescribedby ? 'input-message' : '',
+        error ? 'checkbox-error-message' : '',
+        hasDescription ? 'description' : '',
+      // Return null so we don't add the attribute if we have an empty string
+      ].filter(Boolean).join(' ').trim() || null;
       return (
         <Host>
           <div id="description">
             {description ? <p>{description}</p> : <slot name="description" />}
           </div>
           {hint && <span class="hint-text">{hint}</span>}
-          <span id="error-message" role="alert">
+          <span id="checkbox-error-message" role="alert">
             {error && (
               <Fragment>
                 <span class="sr-only">{i18next.t('error')}</span> {error}