From 02301dfac6e2964eb7975a82b53f15c3ab976628 Mon Sep 17 00:00:00 2001 From: Kerry Powell Date: Wed, 25 Oct 2023 09:49:34 -0600 Subject: [PATCH 1/4] va-process-list: add sr-only text for statuses, choose darker color for pending status that meets accessibility requirements, add alt text to checkbox image in css --- .../stories/va-process-list-uswds.stories.jsx | 6 ++-- .../test/va-process-list-item.e2e.ts | 36 +++++++++++++++++++ .../va-process-list/va-process-list-item.scss | 2 +- .../va-process-list/va-process-list-item.tsx | 7 +++- .../va-process-list/va-process-list.scss | 10 +++--- 5 files changed, 51 insertions(+), 10 deletions(-) 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/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..2878bb730 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,10 @@ 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) / "Completed" !important; } ::slotted(va-process-list-item[active='true']):before { @@ -21,12 +21,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) { From 7b2aa717e357427495a9e38260bd9ab8ef11ca4d Mon Sep 17 00:00:00 2001 From: Kerry Powell Date: Thu, 26 Oct 2023 08:44:21 -0600 Subject: [PATCH 2/4] 4.46.2 --- packages/web-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 6ed55be35..3806094f5 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.2", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js", From 022217ad4aabed204efe5f1be2b8651c839d571b Mon Sep 17 00:00:00 2001 From: Kerry Powell Date: Fri, 27 Oct 2023 09:20:44 -0600 Subject: [PATCH 3/4] Fix issue with checkmark not showing in FF and Safari --- .../src/components/va-process-list/va-process-list.scss | 1 + 1 file changed, 1 insertion(+) 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 2878bb730..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 @@ -12,6 +12,7 @@ ::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; // 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; } From 4f6be0e39a3fa7b0ac911b5b63b9751f7791839d Mon Sep 17 00:00:00 2001 From: Kerry Powell Date: Fri, 27 Oct 2023 10:10:40 -0600 Subject: [PATCH 4/4] 4.46.3 --- packages/web-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 3806094f5..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.2", + "version": "4.46.3", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js",