feat(ui5-link): introduce reactive area size property (#10762)

A new enumeration property called "interactiveAreaSize" is now added.
It is designed to make links easier to activate and helps meet the _WCAG 2.2 Target Size_ requirement.
The property is applicable only for the _SAP Horizon_ themes.
The interactive area should be sufficiently large to help users avoid accidentally selecting (clicking or tapping) on unintended UI elements.
    There are two possible values for this property:
`Normal` and `Large`:
- The default value is `Normal` and it implies no change in the visualization and behavior of the interactive elements.
- The second option is `Large`. In this case the height of the interactive target area is increased. This option should be used when the interactive element is displayed as an overlay on top of other interactive parts of the page.

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>