From 31d3ce26fd10e9887e5f3cb1995adb2c7ac9c0d6 Mon Sep 17 00:00:00 2001
From: Kerry Powell <1776069+powellkerry@users.noreply.github.com>
Date: Tue, 17 Dec 2024 08:22:43 -0700
Subject: [PATCH] va-process-list-item: move status eyebrow into header so that
 it gets read by screen readers (#1437)

* va-process-list-item: move status eyebrow into header so that it gets read by screen readers

* update based on accessibility review

* Make the eyebrow color 3d4551 for all statuses
---
 .../va-process-list/test/va-process-list-item.e2e.ts |  8 ++++++--
 .../va-process-list/test/va-process-list.e2e.ts      |  8 ++++++--
 .../va-process-list/va-process-list-item.scss        | 11 +++++++++++
 .../va-process-list/va-process-list-item.tsx         | 12 +++++++-----
 4 files changed, 30 insertions(+), 9 deletions(-)

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 d120a1be7..30a1247c0 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
@@ -30,7 +30,9 @@ describe('va-process-list-item', () => {
     expect(element).toEqualHtml(`
       <va-process-list-item class="hydrated usa-process-list__item" role="listitem" header="Heading">
         <!---->
-        <h3 class="usa-process-list__heading" part="header">Heading</h3>
+        <h3 class="usa-process-list__heading" part="header">
+          <div>Heading</div>
+        </h3>
         <p>Some content</p>
       </va-process-list-item>
     `);
@@ -47,7 +49,9 @@ describe('va-process-list-item', () => {
     expect(element).toEqualHtml(`
       <va-process-list-item class="hydrated usa-process-list__item" role="listitem" header="Heading" level="1">
         <!---->
-        <h1 class="usa-process-list__heading" part="header">Heading</h1>
+        <h1 class="usa-process-list__heading" part="header">
+          <div>Heading</div>
+        </h1>
         <p>Some content</p>
       </va-process-list-item>
     `);
diff --git a/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts b/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts
index 052f425f9..c1606dddc 100644
--- a/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts
+++ b/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts
@@ -49,12 +49,16 @@ describe('va-process-list', () => {
         </mock:shadow-root>
         <va-process-list-item class="hydrated usa-process-list__item" header="Step one" role="listitem">
           <!---->  
-          <h3 class="usa-process-list__heading" part="header">Step one</h3>
+          <h3 class="usa-process-list__heading" part="header">
+            <div>Step one</div>
+          </h3>
           <p>Some content</p>
         </va-process-list-item>
         <va-process-list-item class="hydrated usa-process-list__item" header="Step two" role="listitem">
           <!---->
-          <h3 class="usa-process-list__heading" part="header">Step two</h3>
+          <h3 class="usa-process-list__heading" part="header">
+            <div>Step two</div>
+          </h3>
           <p>Additional content</p>
           <ul>
             <li>Item one</li>
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 155442984..6ab58c6f4 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,15 +8,26 @@
 }
 
 .usa-process-list__heading-eyebrow {
+  @extend .usa-process-list__heading; // needed for "source Sans Pro" font-family
   color: var(--vads-color-base-darker);
   text-transform: uppercase;
+  font-weight: normal;
+  font-size: var(--vads-font-size-source-sans-normalized);
 }
 
 va-process-list-item[pending='true'] .usa-process-list__heading {
   color: var(--vads-process-list-color-text-pending-on-light);
+
+  .usa-process-list__heading-eyebrow {
+    color: var(--vads-color-base-darker);
+  }
 }
 va-process-list-item[active='true'] .usa-process-list__heading {
   color: var(--vads-color-primary);
+
+  .usa-process-list__heading-eyebrow {
+    color: var(--vads-color-base-darker);
+  }
 }
 
 /* h6 remains as Source Sans Pro, everything else uses Bitter */
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 e783bc22c..4934348b2 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
@@ -57,11 +57,13 @@ export class VaProcessListItem {
     
     return (
       <Host role="listitem" class='usa-process-list__item'>
-        { status ?
-          <div class="usa-process-list__heading-eyebrow">{statusTextMap[status]}</div>
-          : null
-        }
-        {header ? <HeaderLevel part="header" class='usa-process-list__heading'>{header}</HeaderLevel> : null}
+        {header || status ? (
+          // aria-label hack to avoid header being read twice in voiceOver
+          <HeaderLevel part="header" class='usa-process-list__heading'>
+            {status ? <div class="usa-process-list__heading-eyebrow">{statusTextMap[status]}</div> : null}
+            {header ? <div>{header}</div> : null}
+          </HeaderLevel> 
+        ): null}
         <slot/>
       </Host>
     )