Merge branch 'main' into 3640-css-library-assets

Author: powellkerry

packages/storybook/stories/va-checkbox-group-uswds.stories.jsx

@@ -285,7 +285,7 @@ const FormsPatternMultipleTemplate = ({
         />
       </va-checkbox-group>
       <hr />
-      <va-button text="click to focus header" onClick={handleClick} uswds={false}></va-button>
+      <va-button text="Click to focus header" onClick={handleClick}></va-button>
     </>
   );
 };
@@ -349,7 +349,7 @@ const FormsPatternSingleTemplate = ({
 
       <hr />
 
-      <va-button text="click to focus header" onClick={handleClick} uswds={false}></va-button>
+      <va-button text="Click to focus header" onClick={handleClick}></va-button>
     </>
   );
 };

packages/storybook/stories/va-memorable-date-uswds.stories.jsx

@@ -173,9 +173,8 @@ const FormsPatternSingleTemplate = ({ label, name, hint, required, error, value,
       <hr />
 
       <va-button 
-        text="click to focus header" 
-        onClick={handleClick}
-        uswds={false}>
+        text="Click to focus header" 
+        onClick={handleClick}>
       </va-button>
     </>
   );
@@ -224,9 +223,8 @@ const FormsPatternMultipleTemplate = ({ label, name, hint, required, error, valu
       <hr />
 
       <va-button 
-        text="click to focus header" 
-        onClick={handleClick}
-        uswds={false}>
+        text="Click to focus header" 
+        onClick={handleClick}>
       </va-button>
     </>
   );

packages/storybook/stories/va-radio-uswds.stories.jsx

@@ -331,9 +331,8 @@ const FormsPatternMultipleTemplate = ({ label, required }) => {
 
       <hr />
       <va-button
-        text="click to focus header"
+        text="Click to focus header"
         onClick={handleClick}
-        uswds={false}
       ></va-button>
     </>
   );
@@ -387,7 +386,7 @@ const FormsPatternSingleTemplate = ({
 
       <hr />
 
-      <va-button text="click to focus header" onClick={handleClick} uswds={false}></va-button>
+      <va-button text="Click to focus header" onClick={handleClick}></va-button>
     </>
   );
 };

packages/storybook/stories/va-select-uswds.stories.jsx

@@ -286,7 +286,7 @@ const FormsPatternSingleTemplate = args => {
       <hr />
 
       <va-button
-        text="click to focus header"
+        text="Click to focus header"
         onClick={handleClick}
       ></va-button>
     </>

packages/storybook/stories/va-text-input-uswds.stories.jsx

@@ -259,9 +259,8 @@ const FormsPatternMultipleTemplate = ({ name, value, uswds }) => {
       <va-text-input name={name} label="Email address" value={value} />
       <hr />
       <va-button
-        text="click to focus header"
+        text="Click to focus header"
         onClick={handleClick}
-        uswds={false}
       ></va-button>
     </>
   );
@@ -304,9 +303,8 @@ const FormsPatternSingleTemplate = ({ name, value, error }) => {
       <hr />
 
       <va-button
-        text="click to focus header"
+        text="Click to focus header"
         onClick={handleClick}
-        uswds={false}
       ></va-button>
     </>
   );

packages/storybook/stories/va-textarea-uswds.stories.jsx

@@ -153,9 +153,8 @@ const FormsPatternSingleTemplate = ({
       <hr />
 
       <va-button 
-        text="click to focus header" 
-        onClick={handleClick}
-        uswds={false}>
+        text="Click to focus header" 
+        onClick={handleClick}>
       </va-button>
     </>
   );
@@ -230,9 +229,8 @@ const FormsPatternMultipleTemplate = ({
       <hr />
 
       <va-button 
-        text="click to focus header"
-        onClick={handleClick}
-        uswds={false}>
+        text="Click to focus header"
+        onClick={handleClick}>
       </va-button>
     </>
   );

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

@@ -284,6 +284,16 @@ describe('va-checkbox', () => {
     expect(checkboxEl).toEqualAttribute('aria-checked', 'mixed');
   });
 
+  it('does not set aria-checked when toggled off', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<va-checkbox label="Just another checkbox here" />',
+    );
+    const checkboxEl = await page.find('va-checkbox >>> input');
+
+    expect(checkboxEl).not.toHaveAttribute('aria-checked');
+  });
+
   it('does not set the data-indeterminate attribute if checked is set', async () => {
     const page = await newE2EPage();
     await page.setContent(

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

@@ -232,6 +232,15 @@ export class VaCheckbox {
         .join(' ')
         // Return null so we don't add the attribute if we have an empty string
         .trim() || null;
+    
+    let ariaChecked: boolean | string | null;
+    if (indeterminate && !checked) {
+      ariaChecked = 'mixed';
+    } else if (!indeterminate && !checked) {
+      ariaChecked = null;
+    } else {
+      ariaChecked = checked;
+    }
 
     return (
       <Host>
@@ -266,7 +275,7 @@ export class VaCheckbox {
             aria-invalid={error ? 'true' : 'false'}
             disabled={disabled}
             data-indeterminate={indeterminate && !checked}
-            aria-checked={indeterminate && !checked ? 'mixed' : checked}
+            aria-checked={ariaChecked}
           />
           <label htmlFor="checkbox-element" class="va-checkbox__label">
             <span part="label">{label}</span>&nbsp;