Switch element doesn't have visible keyboard focus (a11y)

[siwood]

What should happen?

To meet WCAG 2.0 A (minimum) accessibility requirements, keyboard focus must be visible for all interactive elements. Because the switch is styling the overrides an HTML checkbox, it needs to maintain visible focus/interactivity.

What happens instead?

When tabbing through a page with a switch element, the keyboard focuses on the element but nothing is visible, making it unclear/unusable for keyboard navigation.

Possible Solution

Something like:
.switch-input:focus + label { border: 2px solid get-color(primary-200); }

Test Case and/or Steps to Reproduce (for bugs)

How to reproduce:

1. Go to any page with a switch element (for example, the documentation page)
2. Use the keyboard to navigate through the page (tabs is generally the browser default)
3. Notice that whenever the focus reaches a switch, it disappears.

Context

WCAG is a common and legally required standard to use for many websites.

Your Environment

• Foundation version(s) used: 6.7.4 (and I think 6.7.5 if that's what the documentation page is using)
• Browser(s) name and version(s): Chrome
• Device, Operating System and version: MacOS

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.