va-link: fix double outline on focus

[powellkerry]

Chromatic

https://3264-double-focus-ouline--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Formation adds a :focus outline style to all elements with a href attribute. This resulted in the component having a focus outlines on both the container and the anchor tag. This change adds a style in va-link.scss to set the outline to none on the container.

* I tried to avoid the !important but it seems that this formation style overrides all variations of the component style (unless there is one that I didn't try)

Closes 3264

QA Checklist

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

Screenshots

Before:

After:

Acceptance criteria

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

Definition of done

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

[Mottie]

I was taking a peek at this and noticed that va-promo-banner and va-notification also have an href property.

Maybe changing the main definition to this would work?

a[href]:focus, area[href]:focus {
  /* outline definition */
}

I don't think we use area anywhere 🤷🏽

[rsmithadhoc]

I was taking a peek at this and noticed that va-promo-banner and va-notification also have an href property.

Maybe changing the main definition to this would work?

a[href]:focus, area[href]:focus {
  /* outline definition */
}

I don't think we use area anywhere 🤷🏽

I believe we fixed va-promo-banner in department-of-veterans-affairs/vets-design-system-documentation#2936 and va-notification shows as deprecated.