diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index bbc25c9079f5..88e1bf4c0363 100644
--- a/packages/main/src/Link.ts
+++ b/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 ui5-link's reliability and usability, it is recommended to use the InteractiveAreaSize.Large value in scenarios where the ui5-link component is placed inside another interactive component, such as a list item or a table cell.
+ * Setting the interactiveAreaSize property to InteractiveAreaSize.Large increases the ui5-link's invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired ui5-link, 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.
*
diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
index b8cf6c8bdc0e..88d05fde9f8e 100644
--- a/packages/main/src/themes/Link.css
+++ b/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);
}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Link-parameters.css b/packages/main/src/themes/base/Link-parameters.css
index 46fdaf4d3fbe..dfb8fcb613ad 100644
--- a/packages/main/src/themes/base/Link-parameters.css
+++ b/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;
}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/Link-parameters.css b/packages/main/src/themes/sap_horizon/Link-parameters.css
index 29e6a4ea2b76..6d5a428e6a1b 100644
--- a/packages/main/src/themes/sap_horizon/Link-parameters.css
+++ b/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;
}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css b/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
index 29e6a4ea2b76..6d5a428e6a1b 100644
--- a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
+++ b/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;
}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css
index beee8369cb7a..7c8dafe608d2 100644
--- a/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css
+++ b/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;
}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css
index beee8369cb7a..7c8dafe608d2 100644
--- a/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css
+++ b/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;
}
\ No newline at end of file
diff --git a/packages/main/src/types/InteractiveAreaSize.ts b/packages/main/src/types/InteractiveAreaSize.ts
new file mode 100644
index 000000000000..eb198172d890
--- /dev/null
+++ b/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;
diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
index 2f4444204131..b2bf638dd7af 100644
--- a/packages/main/test/pages/Link.html
+++ b/packages/main/test/pages/Link.html
@@ -65,10 +65,10 @@