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 InteractiveAreaSize from "./types/InteractiveAreaSize.js";
 // Template
 import LinkTemplate from "./LinkTemplate.js";
 
@@ -154,6 +155,22 @@ class Link extends UI5Element implements ITabbable {
 	@property()
 	design: `${LinkDesign}` = "Default";
 
+	/**
+	 * Defines the target area size of the link:
+	 * - **InteractiveAreaSize.Normal**: The default target area size.
+	 * - **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.
+	 *
+	 * **Note:**The property 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:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.
+	 * Setting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.
+	 *
+	 * @public
+	 * @since 2.8.0
+	 * @default "Normal"
+	 */
+	@property()
+	interactiveAreaSize: `${InteractiveAreaSize}` = "Normal";
+
 	/**
 	 * 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([interactive-area-size="Large"]) .ui5-link-root {
+	line-height: var(--_ui5_link_large_interactive_area_height);
+}
+
+:host([interactive-area-size="Large"])::part(icon), 
+:host([interactive-area-size="Large"])::part(endIcon) {
+	height: var(--_ui5_link_large_interactive_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_interactive_area_height: unset;
 }

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_interactive_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_interactive_area_height: 1.5rem;
 }

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

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

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

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

packages/main/src/types/InteractiveAreaSize.ts

@@ -0,0 +1,22 @@
+/**
+ * Defines the area size around the component that the user can select.
+ *
+ * @public
+ * @since 2.8.0
+ */
+enum InteractiveAreaSize {
+
+	/**
+	 * The default target area size (the area taken by the component itself without any extra invisible touch area).
+	 * @public
+	 */
+	Normal = "Normal",
+
+	/**
+	 * Enlarged target area size (up to 24px in height) provides users with an enhanced dedicated space to interact with the component.
+	 * @public
+	 */
+	Large = "Large",
+}
+
+export default InteractiveAreaSize;

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" interactive-area-size="Large">View employee profile</ui5-link> <br>
+		<ui5-link id="linkWithIcon" design="Subtle" icon="employee" interactive-area-size="Large">View employee profile</ui5-link> <br> <br>
+		<ui5-link id="non-wrapping-link" end-icon="cloud" interactive-area-size="Large">Weather today</ui5-link> <br>
+		<ui5-link class="link2auto" id="linkWithEndIcon" end-icon="cloud" wrapping-type="None" interactive-area-size="Large">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>