[Safari] There is no outline for the Button

[monteri]

There is no outline for the Buttons (OpenEdx, Brand themes)

[wittjeff]

Are you talking about outline attribute in css, which is the default focus state styling? Generally we use box-shadow instead, for two reasons: 1) it allows rounded corners (unlike outline, last time I checked), 2) it allow a gap between the focus state styling (2px box-shadow) and the thing being focused, which helps with WCAG 2.2: https://www.w3.org/TR/WCAG22/#focus-appearance (we're not required to conform to AAA-level WCAG Guidelines, but we do here so that's a bonus.

In practice there is a better way to use outline: anywhere that we have an alternative to outline attribute for focus state styling, we should probably use outline: transparent instead of outline: none. This is because, in Windows High Contrast Mode, box-shadows are removed and outline (if not None) is turned into a bright high-contrast color. So transparent value gets mapped to a visible value, and focus styling does its job. But none value does not get mapped, so there may be no focus state styling in Window with High Contrast Mode on.

It'd be awesome if someone would go through all of Paragon and replace any instance of outline:none with outline:transparent. I'll file another issue for this: #2789

[khudym]

Thank you for information!
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus as we can see, Safari does not give focus to the button on click event.