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} />