va-process-list: accessibility updates (staging review) (#924)

* 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 * 4.46.2 * Fix issue with checkmark not showing in FF and Safari * 4.46.3
department-of-veterans-affairs · Oct 27, 2023 · 1707e54 · 1707e54
1 parent d88a2b0
commit 1707e54
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 11 deletions.
diff --git 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 (
     <va-process-list uswds={uswds}>
-      <va-process-list-item checked header='Checkmark Icon'>  
-        <p>Add the prop <code>checked</code> to the list icon a checkmark.</p>
+      <va-process-list-item checkmark header='Checkmark Icon'>  
+        <p>Add the prop <code>checkmark</code> to make the list icon a checkmark.</p>
       </va-process-list-item>
       <va-process-list-item active header='Active Icon'>
         <p>Add the prop <code>active</code> to make the list icon and header blue.</p>
       </va-process-list-item>
       <va-process-list-item pending header='Pending Icon'>
-        <p>Add the prop <code>pending</code> list item and icon grayed out.</p>
+        <p>Add the prop <code>pending</code> to make the list item and icon grayed out.</p>
       </va-process-list-item>
       <va-process-list-item header='Default Icon' />
     </va-process-list>

diff --git 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
@@ -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(`
+      <ol>
+        <va-process-list-item header="Heading" checkmark>
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    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(`
+      <ol>
+        <va-process-list-item header="Heading" pending>
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    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(`
+      <ol>
+        <va-process-list-item header="Heading" active>
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    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
@@ -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
@@ -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 (
       <Host role="listitem" class='usa-process-list__item'>
+        {
+          checkmark || active || pending ? 
+            <span class='sr-only'>{checkmark ? 'Completed:' : active ? 'Current Step:' : pending ? 'Pending:' : null}</span>
+          : null
+        }
         {header ? <HeaderTag class='usa-process-list__heading'>{header}</HeaderTag> : null}
         <slot/>
       </Host>

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
@@ -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) {