Use focus design token on radios, checkboxes, selects

[angelikatyborska]

Fixes #820

Changes

• selects, radio inputs, and checkboxes now use design-tokens/focus for focus-visible styles

📸 Looks like

Providing gifs because the style changes include a transition.

Select

Radio

Checkbox

How to QA

👀 Visual changes

Insert a detailed list explaining exactly how to QA your changes from a designer’s PoV

• git fetch
• git checkout <pr-branch-name>
• yarn
• yarn storybook
• navigate to Base / Checkbox, Base / Radio, and Base / Select

Check:

• The appearance matches the design in Zeplin
• The Zeplin component is correctly linked in storybook
• The documentation for this component is correct, understandable, and up-to-date.

👾 Code changes

Check:

• The documentation for this component is correct, understandable, and up-to-date.
• The component makes good use of CSS custom properties to simplify creating variants (or doesn’t have variants).
• Everything that should be a variable, is.

Preflight checks

PR author to check, and delete if not applicable

• Storybook documentation has been updated
• Fixtures in test/scss/ have been updated
• Your changes have been added to the unreleased section of CHANGELOG.md

[angelikatyborska]

See comments in #820 (comment) before reviewing

[angelikatyborska]

Note to self: what about dialogs? dialogs are focusable

Another note to self: scrollable elements can be focused in Firefox