va-process-list-item: move status eyebrow into header so that it gets…

… read by screen readers
department-of-veterans-affairs · Dec 13, 2024 · 9657204 · 9657204
1 parent 22aecb8
commit 9657204
Show file tree

Hide file tree

Showing 4 changed files with 32 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,11 @@ 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 aria-label="Heading" class="usa-process-list__heading" part="header">
+          <span aria-hidden="true">
+            <div>Heading</div>
+          </span>
+        </h3>
         <p>Some content</p>
       </va-process-list-item>
     `);
@@ -47,7 +51,11 @@ 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 aria-label="Heading" class="usa-process-list__heading" part="header">
+          <span aria-hidden="true">
+            <div>Heading</div>
+          </span>
+        </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,20 @@ 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 aria-label="Step one" class="usa-process-list__heading" part="header">
+            <span aria-hidden="true">
+              <div>Step one</div>
+            </span>
+          </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 aria-label="Step two" class="usa-process-list__heading" part="header">
+            <span aria-hidden="true">
+              <div>Step two</div>
+            </span>
+          </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,8 +8,11 @@
 }
 
 .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 {

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,15 @@ 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' aria-label={`${status ? `${statusTextMap[status]}: ` : ''}${header}`}>
+            <span aria-hidden="true">
+              {status ? <div class="usa-process-list__heading-eyebrow">{statusTextMap[status]}</div> : null}
+              {header ? <div>{header}</div> : null}
+            </span>
+          </HeaderLevel> 
+        ): null}
         <slot/>
       </Host>
     )