va-process-list-item: Add text to describe status (#1362)

* va-process-list-item: Add text to describe status * remove sr-only status text * clean up ternary code * try upgrading @axe-core/puppeteer to overcome GHA test issues * add --no-sandbox to stencil config
department-of-veterans-affairs · Oct 15, 2024 · 8f86f2d · 8f86f2d
1 parent 6e00ab0
commit 8f86f2d
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 94 deletions.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -37,7 +37,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@axe-core/puppeteer": "^4.4.0",
+    "@axe-core/puppeteer": "^4.10.0",
     "@babel/core": "^7.12.13",
     "@department-of-veterans-affairs/formation": "^11.0.6",
     "@stencil/postcss": "^2.0.0",
@@ -58,7 +58,7 @@
     "jest-transformer-svg": "^2.0.1",
     "lit-html": "^1.3.0",
     "postcss-url": "^10.1.1",
-    "puppeteer": "^21.0.0",
+    "puppeteer": "21.0.0",
     "react-dom": "^18.3.0",
     "typescript": "^5.5.4"
   },

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,7 +65,7 @@ describe('va-process-list-item', () => {
 
     await axeCheck(page);
   });
-  it('includes sr-only span for checkmark status', async () => {
+  it('renders the right status text for checkmark status', async () => {
     const page = await newE2EPage();
     await page.setContent(`
       <ol>
@@ -74,10 +74,22 @@ describe('va-process-list-item', () => {
         </va-process-list>
       </ol>
     `);
-    const element = await page.find('va-process-list-item .sr-only');
-    expect(element.innerText).toEqual('Completed:');
+    const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
+    expect(element.innerText).toEqual('Complete');
   })
-  it('includes sr-only span for pending status', async () => {
+  it('renders the right status text 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 .usa-process-list__heading-eyebrow');
+    expect(element.innerText).toEqual('Active');
+  })
+  it('renders the right status text for pending status', async () => {
     const page = await newE2EPage();
     await page.setContent(`
       <ol>
@@ -86,20 +98,20 @@ describe('va-process-list-item', () => {
         </va-process-list>
       </ol>
     `);
-    const element = await page.find('va-process-list-item .sr-only');
-    expect(element.innerText).toEqual('Pending:');
+    const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
+    expect(element.innerText).toEqual('Pending');
   })
-  it('includes sr-only span for active status', async () => {
+  it('does not render the status text by default', async () => {
     const page = await newE2EPage();
     await page.setContent(`
       <ol>
-        <va-process-list-item header="Heading" active>
+        <va-process-list-item header="Heading">
           <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:');
+    const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
+    expect(element).toBeNull;
   })
 })
 
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
@@ -7,6 +7,10 @@
   display: list-item;
 }
 
+.usa-process-list__heading-eyebrow {
+  color: var(--uswds-system-color-gray-cool-70);
+}
+
 va-process-list-item[pending='true'] .usa-process-list__heading {
   color: var(--vads-process-list-color-text-pending-on-light);
 }

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
@@ -42,12 +42,17 @@ export class VaProcessListItem {
     const {header, level, checkmark, active, pending} = this;
     // eslint-disable-next-line i18next/no-literal-string
     const HeaderTag = `h${level}`;
+    const status = checkmark ? 'checkmark' : active ? 'active' : pending ? 'pending' : null;
+    const statusTextMap = {
+      checkmark: 'Complete',
+      active: 'Active',
+      pending: 'Pending'
+    }
 
     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>
+        { status ?
+          <div class="usa-process-list__heading-eyebrow">{statusTextMap[status]}</div>
           : null
         }
         {header ? <HeaderTag class='usa-process-list__heading'>{header}</HeaderTag> : null}