Use focus design token on radios, checkboxes, selects

[angelikatyborska]

Fixes https://github.com/bitcrowd/bitstyles/issues/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
• [x] Fixtures in test/scss/ have been updated
• [x] Your changes have been added to the unreleased section of CHANGELOG.md

[angelikatyborska]

See comments in https://github.com/bitcrowd/bitstyles/issues/820#issuecomment-2295965837 before reviewing

[angelikatyborska]

Note to self: what about dialogs? dialogs are focusable

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