Segmented progress bar focus state is not yellow

[mattwrightva]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

The outline for the focus state of the segmented progress bar header is not yellow like the rest of the design system focus states.

What I expected to happen

The Medical Records team is using the segmented progress bar component for our download records form flow and we need to be able to focus this header element when the page loads for accessibility reasons. We were surprised to see that the outline in the focus state is not the standard yellow (hex #FACE00).

Reproducing

• CSS Library version: 0.18.0
• Device: Macbook
• Browser: Chrome Version 133.0.6943.53 (Official Build) (arm64)

Steps to reproduce:

1. Set the focus of the page to the header element of the segmented progress bar (it's defaulted to be an h4).
2. Notice the outline is blue rather than the standard yellow

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details