Fix styling issues in Upsell Component

[Dieterrr]

Please give us a description of what happened.

1. The new Upsell Button Component from Introduce UpsellButton component #750 works as expected in chrome, but not in firefox and safari. Here the focus style is not applied (the blue box). The active and hover styles are applied correctly though.

2. Also the offset seems a bit off (in all browsers): it's not completely centered. The middle is 0,78 cm from the bottom and 0,90 cm from the top. This is not the case in the other upsell buttons (the css buttons in the plugin or on yoast.com).

See image.

Please describe what you expected to happen and why.

-Expect the focus style to be applied in safari and firefox.
-Expect the text of the button to be vertically centered.

How can we reproduce this behavior?

1. Open the standalone app -> see the styling (in different browsers).

Technical info

• yoast-components version: 4.13

[afercia]

works as expected in chrome, but not in firefox and safari. Here the focus style is not applied (the blue box)

Worth reminding at the moment this button doesn't have a focus style specified via CSS. This happens for other yoast-components buttons too: they don't have a focus style set via CSS. Therefore, browsers use their own native focus style, which varies depending on the browser and the operating system.

This:

is the native focus style Chrome and Opera use on macOS. On Windows, Chrome applies a different native focus style:

Edge and IE11 use the classical dotted outline:

Firefox seems to have problems with this button and doesn't show any native focus style. On standard buttons, this is how it looks:

The native focus styles have also changed during history. 🙂Previous browsers versions used different styles, and they will probably change again in the future. If we want to have a consistent styling across browsers and operating systems, there's the need to craft a CSS rule that works consistently everywhere. In the plugin, the upsell button uses the following:

https://github.com/Yoast/wordpress-seo/blob/c3bc088c1157c683cd64913cf277cef7ab685907/css/src/admin-global.scss#L489-L491

Worth also reminding that on MyYoast many buttons (all?) don't have a focus style set via CSS and rely on the browsers native style.