Global | Testing focus style

[Mottie]

Chromatic

https://1314-test-focus-styles--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

See department-of-veterans-affairs/vets-design-system-documentation#1314

Adding focus style to web components. Note that I did not attempt to modify the minimal header or footer styling.

Update: NOTE changes focus background to our default yellow color, so none of the screenshots currently match

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

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)