diff --git a/packages/storybook/stories/va-process-list-uswds.stories.jsx b/packages/storybook/stories/va-process-list-uswds.stories.jsx index 5d9efcc21..0cf517f10 100644 --- a/packages/storybook/stories/va-process-list-uswds.stories.jsx +++ b/packages/storybook/stories/va-process-list-uswds.stories.jsx @@ -70,14 +70,14 @@ const Template = ({uswds}) => { const StatusTemplate = ({uswds}) => { return ( - -

Add the prop checked to the list icon a checkmark.

+ +

Add the prop checkmark to make the list icon a checkmark.

Add the prop active to make the list icon and header blue.

 -

Add the prop pending list item and icon grayed out.

+

Add the prop pending to make the list item and icon grayed out.

 diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 6ed55be35..9d23e7575 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/web-components", - "version": "4.46.1", + "version": "4.46.3", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts b/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts index d748debed..abf24053c 100644 --- a/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts +++ b/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts @@ -65,5 +65,41 @@ describe('va-process-list-item', () => { await axeCheck(page); }); + it('includes sr-only span for checkmark status', async () => { + const page = await newE2EPage(); + await page.setContent(` +
    + +

    Some content

    + +
+ `); + const element = await page.find('va-process-list-item .sr-only'); + expect(element.innerText).toEqual('Completed:'); + }) + it('includes sr-only span for pending status', async () => { + const page = await newE2EPage(); + await page.setContent(` +
    + +

    Some content

    + +
+ `); + const element = await page.find('va-process-list-item .sr-only'); + expect(element.innerText).toEqual('Pending:'); + }) + it('includes sr-only span for active status', async () => { + const page = await newE2EPage(); + await page.setContent(` +
    + +

    Some content

    + +
+ `); + const element = await page.find('va-process-list-item .sr-only'); + expect(element.innerText).toEqual('Current Step:'); + }) }) diff --git a/packages/web-components/src/components/va-process-list/va-process-list-item.scss b/packages/web-components/src/components/va-process-list/va-process-list-item.scss index 11b0a548f..dbf9f5c24 100644 --- a/packages/web-components/src/components/va-process-list/va-process-list-item.scss +++ b/packages/web-components/src/components/va-process-list/va-process-list-item.scss @@ -8,7 +8,7 @@ display: list-item; } va-process-list-item[pending='true'] .usa-process-list__heading { - color: var(--color-gray-light); + color: var(--color-gray-medium); } va-process-list-item[active='true'] .usa-process-list__heading { color: var(--color-primary); diff --git a/packages/web-components/src/components/va-process-list/va-process-list-item.tsx b/packages/web-components/src/components/va-process-list/va-process-list-item.tsx index f21d58178..b90e82dba 100644 --- a/packages/web-components/src/components/va-process-list/va-process-list-item.tsx +++ b/packages/web-components/src/components/va-process-list/va-process-list-item.tsx @@ -39,12 +39,17 @@ export class VaProcessListItem { @Prop() checkmark?: boolean = false; render() { - const {header, level} = this; + const {header, level, checkmark, active, pending} = this; // eslint-disable-next-line i18next/no-literal-string const HeaderTag = `h${level}`; return ( + { + checkmark || active || pending ? + {checkmark ? 'Completed:' : active ? 'Current Step:' : pending ? 'Pending:' : null} + : null + } {header ? {header} : null} diff --git a/packages/web-components/src/components/va-process-list/va-process-list.scss b/packages/web-components/src/components/va-process-list/va-process-list.scss index 1f6e967d3..3ebe5f80e 100644 --- a/packages/web-components/src/components/va-process-list/va-process-list.scss +++ b/packages/web-components/src/components/va-process-list/va-process-list.scss @@ -9,10 +9,11 @@ counter-reset: usa-numbered-list; } -::slotted(va-process-list-item[checked='true']):before { +::slotted(va-process-list-item[checkmark='true']):before { color: var(--color-green) !important; border-color: var(--color-green) !important; - content: url(../../assets/green-check.svg) !important; + content: url(../../assets/green-check.svg) !important; // Alt text is currently not supported in FF and Safari, This is a fallback declaration (10/27/2023) + content: url(../../assets/green-check.svg) / "Completed" !important; } ::slotted(va-process-list-item[active='true']):before { @@ -21,12 +22,12 @@ } ::slotted(va-process-list-item[pending='true']):before { - color: var(--color-gray-light) !important; - border-color: var(--color-gray-light) !important; + color: var(--color-gray-medium) !important; + border-color: var(--color-gray-medium) !important; } ::slotted(va-process-list-item[pending='true']) { - color: var(--color-gray-light) !important; + color: var(--color-gray-medium) !important; } ::slotted(va-process-list-item) {