diff --git a/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx b/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx
index 420dbfc6b..74537c2db 100644
--- a/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx
+++ b/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx
@@ -285,7 +285,7 @@ const FormsPatternMultipleTemplate = ({
/>
-
+
>
);
};
@@ -349,7 +349,7 @@ const FormsPatternSingleTemplate = ({
-
+
>
);
};
diff --git a/packages/storybook/stories/va-memorable-date-uswds.stories.jsx b/packages/storybook/stories/va-memorable-date-uswds.stories.jsx
index 77467c13e..ec5e68e67 100644
--- a/packages/storybook/stories/va-memorable-date-uswds.stories.jsx
+++ b/packages/storybook/stories/va-memorable-date-uswds.stories.jsx
@@ -173,9 +173,8 @@ const FormsPatternSingleTemplate = ({ label, name, hint, required, error, value,
+ text="Click to focus header"
+ onClick={handleClick}>
>
);
@@ -224,9 +223,8 @@ const FormsPatternMultipleTemplate = ({ label, name, hint, required, error, valu
+ text="Click to focus header"
+ onClick={handleClick}>
>
);
diff --git a/packages/storybook/stories/va-radio-uswds.stories.jsx b/packages/storybook/stories/va-radio-uswds.stories.jsx
index 2c006ee0a..27571c9fe 100644
--- a/packages/storybook/stories/va-radio-uswds.stories.jsx
+++ b/packages/storybook/stories/va-radio-uswds.stories.jsx
@@ -331,9 +331,8 @@ const FormsPatternMultipleTemplate = ({ label, required }) => {
>
);
@@ -387,7 +386,7 @@ const FormsPatternSingleTemplate = ({
-
+
>
);
};
diff --git a/packages/storybook/stories/va-select-uswds.stories.jsx b/packages/storybook/stories/va-select-uswds.stories.jsx
index b80a447bc..63cd8b85f 100644
--- a/packages/storybook/stories/va-select-uswds.stories.jsx
+++ b/packages/storybook/stories/va-select-uswds.stories.jsx
@@ -286,7 +286,7 @@ const FormsPatternSingleTemplate = args => {
>
diff --git a/packages/storybook/stories/va-text-input-uswds.stories.jsx b/packages/storybook/stories/va-text-input-uswds.stories.jsx
index ced59968d..9701eed81 100644
--- a/packages/storybook/stories/va-text-input-uswds.stories.jsx
+++ b/packages/storybook/stories/va-text-input-uswds.stories.jsx
@@ -259,9 +259,8 @@ const FormsPatternMultipleTemplate = ({ name, value, uswds }) => {
>
);
@@ -304,9 +303,8 @@ const FormsPatternSingleTemplate = ({ name, value, error }) => {
>
);
diff --git a/packages/storybook/stories/va-textarea-uswds.stories.jsx b/packages/storybook/stories/va-textarea-uswds.stories.jsx
index 89491a93c..244e2b3e8 100644
--- a/packages/storybook/stories/va-textarea-uswds.stories.jsx
+++ b/packages/storybook/stories/va-textarea-uswds.stories.jsx
@@ -153,9 +153,8 @@ const FormsPatternSingleTemplate = ({
+ text="Click to focus header"
+ onClick={handleClick}>
>
);
@@ -230,9 +229,8 @@ const FormsPatternMultipleTemplate = ({
+ text="Click to focus header"
+ onClick={handleClick}>
>
);
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
index 26141d30f..2d51a4089 100644
--- 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
@@ -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(
+ '',
+ );
+ 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(
diff --git a/packages/web-components/src/components/va-checkbox/va-checkbox.tsx b/packages/web-components/src/components/va-checkbox/va-checkbox.tsx
index 87ef35023..7fa1ff74d 100644
--- a/packages/web-components/src/components/va-checkbox/va-checkbox.tsx
+++ b/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 (
@@ -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}
/>