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(`
- Heading
+
+
Heading
+
Some content
`);
@@ -47,7 +49,9 @@ describe('va-process-list-item', () => {
expect(element).toEqualHtml(`
- Heading
+
+
Heading
+
Some content
`);
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', () => {
- Step one
+
+
Step one
+
Some content
- Step two
+
+
Step two
+
Additional content
- Item one
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 (
- { status ?
- {statusTextMap[status]}
- : null
- }
- {header ? {header} : null}
+ {header || status ? (
+ // aria-label hack to avoid header being read twice in voiceOver
+
+ {status ? {statusTextMap[status]}
: null}
+ {header ? {header}
: null}
+
+ ): null}
)