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 @@

Wrapping link

Links with icon and end-icon

- View employee profile
- View employee profile

- Weather today
- Weather today + View employee profile
+ View employee profile

+ Weather today
+ Weather today

Wrapping link with end-icon

Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit adipisicing.