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
department-of-veterans-affairs · Dec 17, 2024 · 31d3ce2 · 31d3ce2
1 parent 3674442
commit 31d3ce2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>
     )