fix: mouse click hinders keyboard

[martascorreia]

Description:

Closes #2372. The problem is related to activation of focus-visible.

When we click the dropdown menu with the mouse, the focus is put on the menu-item correctly with "focus", however, the focus-visible that puts the border around the item is not activated. This property only activates after a keyboard event. So for example in Safari, if you do "arrowdown" and then click "arrowright" (or any other key we are not catching), the outline suddenly appears because an event key was propagated.

My solution was to force this css to appear, and also remove it when not needed. Please let me know if you know a better way to handle this.

Definition of Reviewable:

• Stories (features, a11y) are created/updated
• relevant tickets are linked

[changeset-bot]

🦋 Changeset detected

Latest commit: 862537b

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@solid-design-system/components" specified in the `fixed` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@solid-design-system/styles" specified in the `fixed` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@solid-design-system/tokens" specified in the `fixed` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[github-actions]

🚀 Storybook has been deployed for branch fix_mouse-click-hinders-keyboard

• View Storybook