web-components: focus outline color fixes

[harshil1793]

Chromatic

https://2936-focus-v3-components-fix--65a6e2ed2314f7b8f98609d8.chromatic.com

---

Description

This PR fixes focus outline color for v3 components.

Closes department-of-veterans-affairs/vets-design-system-documentation#2936

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Breadcrumbs:

Banner promo:

Statement of truth:

Privacy agreement:

Back to top:

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

The original ticket says that the outside yellow outline should be removed from this banner (keep the inside border):

Currently outlines the banner itself with the yellow outline, then the internal elements with the default browser outline.
Instead, we should remove the outline from the banner itself as it is not an interactive element, then apply the yellow outline to the link and button inside the banner.

[jamigibbs]

I still see a transition animation in the back to top component. The original issue says:

Remove transition animation to keep it consistent with other components.

Screen.Recording.2024-08-28.at.12.08.22.PM.mov

[harshil1793]

For the banner outline, the issue is coming from the formation because va-promo-banner has an href attribute. I tried to override it, but it doesn't seem to work. Do you think I should make a change in formation to fix this?

[jamigibbs]

For the banner outline, the issue is coming from the formation because va-promo-banner has an href attribute. I tried to override it, but it doesn't seem to work. Do you think I should make a change in formation to fix this?

Can you reset it if you put it in the web component global stylesheet?

[danbrady]

@harshil1793 I notice the focus ring disappears on the Back to top if it's hovered over:

Screen.Recording.2024-09-06.at.1.09.08.PM.mov

[harshil1793]

@danbrady I believe that is existing behavior, I don't mind fixing that if its a bug.

[danbrady]

@harshil1793 Ah, you're right. I see the bug in the existing component too. It would be great if you can fix it now with this update. If the issue starts to take up too much time though, let's create a separate ticket for it. Thanks!