fix(ui5-link): fix "click twice" issue in Safari (#1799) (#1800)

The usage of pseudo elements such as ::after, ::before has side effects on iOs/macOS making the first click to just focus the element and the second to be registered as click. Now, we set the focus with outline, instead of pseudo element. Note: in IE, the focus will be 1px wider on all sides, compared to Safari, Chrome and FF as the outline-offset is not supported.

FIXES: #1796

packages/main/src/themes/Link.css

@@ -10,6 +10,7 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	cursor: pointer;
+	outline: none;
 }
 
 :host([disabled]) {
@@ -65,16 +66,7 @@
 }
 
 .ui5-link-root:focus {
+	outline-offset: -1px;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	text-decoration: underline;
 }
-
-.ui5-link-root:focus::after {
-	content: "";
-	width: var(--_ui5_link_outline_element_size);
-	height: var(--_ui5_link_outline_element_size);
-	position: absolute;
-	left: 0px;
-	border: 1px dotted var(--sapContent_FocusColor);
-	top: 0;
-	outline: none;
-}

packages/main/src/themes/base/Link-parameters.css

@@ -1,4 +1,3 @@
 :root {
 	--_ui5_link_opacity: 0.5;
-	--_ui5_link_outline_element_size: calc(100% - 0.125rem);
 }

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -11,7 +11,7 @@
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
-@import "./Link-parameters.css";
+@import "../base/Link-parameters.css";
 @import "../base/List-parameters.css";
 @import "./ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";

packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -11,7 +11,7 @@
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
-@import "./Link-parameters.css";
+@import "../base/Link-parameters.css";
 @import "../base/List-parameters.css";
 @import "./ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";