Improved aria-checked handling and updating tests to allow for the ro…

…le "hack". (#1336)
department-of-veterans-affairs · Sep 19, 2024 · 22bf87b · 22bf87b
1 parent 5dcec05
commit 22bf87b
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 39 deletions.
diff --git a/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts b/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts
@@ -22,7 +22,7 @@ describe('va-checkbox-group', () => {
     `,
     );
 
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
   it('renders an error message if passed', async () => {
@@ -31,7 +31,9 @@ describe('va-checkbox-group', () => {
       '<va-checkbox-group error="This is an error"></va-checkbox-group>',
     );
 
-    const element = await page.find('va-checkbox-group >>> #checkbox-error-message');
+    const element = await page.find(
+      'va-checkbox-group >>> #checkbox-error-message',
+    );
     expect(element).toEqualHtml(`
      <span id="checkbox-error-message" role="alert">
         <span class="usa-sr-only">error</span>
@@ -61,7 +63,7 @@ describe('va-checkbox-group', () => {
     `,
     );
 
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
   it('renders a required span based on prop', async () => {
@@ -224,7 +226,7 @@ describe('va-checkbox-group', () => {
         <va-checkbox label="Option 2" value="2"></va-checkbox>
       </va-checkbox-group>
     `,);
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
 });
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
@@ -143,7 +143,7 @@ describe('va-checkbox', () => {
       '<va-checkbox required label="This is a test" error="With an error message"/>',
     );
 
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
   it('adds aria-describedby input-message, checkbox-error-message and description ids', async () => {

diff --git a/packages/web-components/src/components/va-checkbox/va-checkbox.tsx b/packages/web-components/src/components/va-checkbox/va-checkbox.tsx
@@ -196,11 +196,20 @@ export class VaCheckbox {
       description || hasDescriptionSlot ? 'description' : '',
       // Return null so we don't add the attribute if we have an empty string
     ].filter(Boolean).join(' ').trim() || null;
+    const ariaChecked = checked ? 'true' : 'false';
 
     return (
       <Host>
-        {description && <legend id="description" class={descriptionClass}>{description}</legend>}
-        {hasDescriptionSlot && <div id="description"><slot name="description" /></div>}
+        {description && (
+          <legend id="description" class={descriptionClass}>
+            {description}
+          </legend>
+        )}
+        {hasDescriptionSlot && (
+          <div id="description">
+            <slot name="description" />
+          </div>
+        )}
 
         {hint && <span class="usa-hint">{hint}</span>}
         <span id="checkbox-error-message" role="alert">
@@ -223,13 +232,25 @@ export class VaCheckbox {
             disabled={disabled}
             onChange={this.handleChange}
           />
-          <label htmlFor="checkbox-element" class="usa-checkbox__label" part="label">
+          <label
+            htmlFor="checkbox-element"
+            class="usa-checkbox__label"
+            part="label"
+            role="checkbox"
+            aria-checked={ariaChecked}
+          >
             {label}&nbsp;
-            {required && <span class="usa-label--required">{i18next.t('required')}</span>}
-            {checkboxDescription && <span class="usa-checkbox__label-description" part="description">{checkboxDescription}</span>}
+            {required && (
+              <span class="usa-label--required">{i18next.t('required')}</span>
+            )}
+            {checkboxDescription && (
+              <span class="usa-checkbox__label-description" part="description">
+                {checkboxDescription}
+              </span>
+            )}
           </label>
           {messageAriaDescribedby && (
-            <span id='input-message' class="usa-sr-only dd-privacy-hidden">
+            <span id="input-message" class="usa-sr-only dd-privacy-hidden">
               {messageAriaDescribedby}
             </span>
           )}

diff --git a/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts b/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts
@@ -37,17 +37,17 @@ describe('va-privacy-agreement', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-privacy-agreement checked="true"/>',
+      '<va-privacy-agreement checked />',
     );
 
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
   it('checkbox should be checked if the `checked` prop is present', async () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-privacy-agreement checked/>',
+      '<va-privacy-agreement checked />',
     );
 
     const vaCheckbox = await page.find('va-privacy-agreement >>> va-checkbox');

diff --git a/packages/web-components/src/components/va-radio-option/test/va-radio-option.e2e.ts b/packages/web-components/src/components/va-radio-option/test/va-radio-option.e2e.ts
@@ -18,7 +18,7 @@ describe('va-radio-option', () => {
     <va-radio-option id="yes2" label="Yes - Any Veteran" name="yes" value="2" class="hydrated">
         <div class="usa-radio">
           <input class="usa-radio__input" id="yes2input" type="radio" name="yes" value="2">
-          <label class="usa-radio__label" for="yes2input">
+          <label aria-checked="false" class="usa-radio__label" for="yes2input" role="radio">
             Yes - Any Veteran
           </label>
         </div>

diff --git a/packages/web-components/src/components/va-radio-option/va-radio-option.tsx b/packages/web-components/src/components/va-radio-option/va-radio-option.tsx
@@ -70,15 +70,9 @@ export class VaRadioOption {
   }
 
   render() {
-    const {
-      checked,
-      name,
-      value,
-      label,
-      disabled,
-      tile,
-      description } = this;
-    const id = this.el.id || (name + value);
+    const { checked, name, value, label, disabled, tile, description } = this;
+    const id = this.el.id || name + value;
+    const ariaChecked = checked ? 'true' : 'false';
 
     const inputClass = classnames({
       'usa-radio__input': true,
@@ -87,16 +81,21 @@ export class VaRadioOption {
     return (
       <div class="usa-radio">
         <input
-            class={inputClass}
-            type="radio"
-            name={name}
-            value={value}
-            checked={checked}
-            disabled={disabled}
-            onClick={() => this.handleChange()}
-            id={id + 'input'}
-          />
-        <label class="usa-radio__label" htmlFor={id + 'input'}>
+          class={inputClass}
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          onClick={() => this.handleChange()}
+          id={id + 'input'}
+        />
+        <label
+          class="usa-radio__label"
+          htmlFor={id + 'input'}
+          role="radio"
+          aria-checked={ariaChecked}
+        >
           {label}
           {description && (
             <span
@@ -108,6 +107,6 @@ export class VaRadioOption {
           )}
         </label>
       </div>
-    )
+    );
   }
 }
diff --git a/packages/web-components/src/components/va-radio/test/va-radio.e2e.ts b/packages/web-components/src/components/va-radio/test/va-radio.e2e.ts
@@ -22,7 +22,7 @@ describe('va-radio', () => {
     `,
     );
 
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
   it('passes an axe check if id is used with identical labels', async () => {
@@ -42,7 +42,7 @@ describe('va-radio', () => {
     `,
     );
 
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
   it('unchecks current option when other button is checked', async () => {
@@ -367,7 +367,7 @@ describe('va-radio', () => {
     </va-radio>
     `);
 
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
 });
diff --git a/...ges/web-components/src/components/va-statement-of-truth/test/va-statement-of-truth.e2e.ts b/...ges/web-components/src/components/va-statement-of-truth/test/va-statement-of-truth.e2e.ts
@@ -12,7 +12,7 @@ describe('va-statement-of-truth', () => {
   it('passes an aXe check', async () => {
     const page = await newE2EPage();
     await page.setContent('<va-statement-of-truth />');
-    await axeCheck(page);
+    await axeCheck(page, ['aria-allowed-role']);
   });
 
   it('correctly sets the error props as attributes', async () => {