feat(ui5-link): introduce interactiveAreaSize property

packages/main/src/Link.ts

@@ -16,6 +16,7 @@ import { getLocationHostname, getLocationPort, getLocationProtocol } from "@ui5/
 import LinkDesign from "./types/LinkDesign.js";
 import type WrappingType from "./types/WrappingType.js";
 import type LinkAccessibleRole from "./types/LinkAccessibleRole.js";
+import type ReactiveAreaMode from "./types/ReactiveAreaMode.js";
 // Template
 import LinkTemplate from "./LinkTemplate.js";
 
@@ -154,6 +155,23 @@ class Link extends UI5Element implements ITabbable {
 	@property()
 	design: `${LinkDesign}` = "Default";
 
+	/**
+	 * Defines the size of the reactive area of the link:
+	 * - **ReactiveAreaMode.Inline**: The link is displayed as part of a sentence.
+	 * - **ReactiveAreaMode.Overlay**: The link is displayed as an overlay on top of other interactive parts of the page.
+	 *
+	 * **Note:**It is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.
+	 * **Note:**The Reactive area size is sufficiently large to help users avoid accidentally selecting (clicking or tapping) on unintented UI elements.
+	 * UI elements positioned over other parts of the page may need an invisible active touch area.
+	 * This will ensure that no elements beneath are activated accidentally when the user tries to interact with the overlay element.
+	 *
+	 * @public
+	 * @since 2.7.0
+	 * @default "Inline"
+	 */
+	@property()
+	reactiveAreaMode: `${ReactiveAreaMode}` = "Inline";
+
 	/**
 	 * Defines how the text of a component will be displayed when there is not enough space.
 	 *

packages/main/src/themes/Link.css

@@ -124,4 +124,13 @@
 :host([design="Subtle"][desktop]:hover:not(:active):focus-within) {
 	color: var(--_ui5_link_focused_hover_text_color);
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
+}
+
+:host([reactive-area-mode="Overlay"]) .ui5-link-root {
+	line-height: var(--_ui5_link_large_reactive_area_height);
+}
+
+:host([reactive-area-mode="Overlay"])::part(icon), 
+:host([reactive-area-mode="Overlay"])::part(endIcon) {
+	height: var(--_ui5_link_large_reactive_area_height);
 }

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

@@ -11,5 +11,5 @@
 	--_ui5_link_focus_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration: none;
 	--_ui5_link_subtle_text_decoration_hover: underline;
-
+	--_ui5_link_large_reactive_area_height: unset;
 }

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

@@ -9,4 +9,5 @@
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }

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

@@ -9,4 +9,5 @@
 	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }

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

@@ -12,4 +12,5 @@
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }

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

@@ -12,4 +12,5 @@
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
+	--_ui5_link_large_reactive_area_height: 1.5rem;
 }

packages/main/src/types/ReactiveAreaMode.ts

@@ -0,0 +1,22 @@
+/**
+ * Reactive area modes of interactable elements.
+ *
+ * @public
+ * @since 2.6.0
+ */
+enum ReactiveAreaMode {
+
+	/**
+	 * The target element is displayed as part of a sentence.
+	 * @public
+	 */
+	Inline = "Inline",
+
+	/**
+	 * The target element is displayed as on overlay on top of other interactive parts of the page.
+	 * @public
+	 */
+	Overlay = "Overlay",
+}
+
+export default ReactiveAreaMode;

packages/main/test/pages/Link.html

@@ -65,10 +65,10 @@ <h2>Wrapping link</h2>
 
 	<section class="group">
 		<h2>Links with icon and end-icon</h2>
-		<ui5-link id="wrapping-link" wrapping-type="Normal" icon="employee">View employee profile</ui5-link> <br>
-		<ui5-link id="linkWithIcon" design="Subtle" icon="employee">View employee profile</ui5-link> <br> <br>
-		<ui5-link id="non-wrapping-link" end-icon="cloud">Weather today</ui5-link> <br>
-		<ui5-link class="link2auto" id="linkWithEndIcon" end-icon="cloud" wrapping-type="None">Weather today</ui5-link>
+		<ui5-link id="wrapping-link" wrapping-type="Normal" icon="employee" reactive-area-mode="Overlay">View employee profile</ui5-link> <br>
+		<ui5-link id="linkWithIcon" design="Subtle" icon="employee" reactive-area-mode="Overlay">View employee profile</ui5-link> <br> <br>
+		<ui5-link id="non-wrapping-link" end-icon="cloud" reactive-area-mode="Overlay">Weather today</ui5-link> <br>
+		<ui5-link class="link2auto" id="linkWithEndIcon" end-icon="cloud" wrapping-type="None" reactive-area-mode="Overlay">Weather today</ui5-link>
 
 		<h2>Wrapping link with end-icon</h2>
 		<ui5-link class="link2auto" end-icon="cloud" id="wrapping-link">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit adipisicing.</ui5-link>