Update focus ring

[vykster]

Improve UI of default browser for focus ring, make a bold yellow.

Acceptance criteria

• When user moves between components next item is highlight with new focus style

Links to user research, designs and resources

• Figma components page

[machikoyasuda]

Hey @srhhnry, I started looking at the designs for this ticket b/c I wanted to get all my questions to you before you start your leave.

I see that the Figma designs show examples of the focus ring on:

• text link (including external links, footer and modal links)
• certain buttons (Previous Page button, Login.gov modal button, modal close X button)

But there are no focus ring examples for:

• standard primary blue button (like Continue, Go back, Spanish, etc.)
• radio input (Eligibility form)
• text input (Courtesy Card form)
• agency selector

These all currently have the browser standard light blue focus rings:

Were the omission of the primary action button, Español button, agency selector radio input and text input intentional? Or should the same yellow focus ring design be applied to those as well?

[srhhnry]

Omission was not intentional! Just my own lack of understanding that aspect of accessibility. I'll mock those elements up either Friday (tomorrow) or next week (and am adding design to this issue for easier tracking).

• standard primary blue button (like Continue, Go back, Spanish, etc.)
• radio input (Eligibility form)
• text input (Courtesy Card form)
• agency selector
• español

[srhhnry]

Focus ring is updated on all those components^ if that all looks good I think we can close this ticket @machikoyasuda

[machikoyasuda]

@srhhnry Figma updates look good! The only thing is, as I mentioned on Slack, the focus ring border radiuses must match that of the element itself. If you're comfortable with that, I can implement the design with the 3px/2px #FDB714 ring with matching border-radiuses.

[srhhnry]

Yes, definitely comfortable with that. But I also feel like I'm missing something--border radius (aka corner radius in Figma) is set to 8px for both the component and the focus ring. Is there another difference you're seeing? I'm curious about the translation to CSS.