feat(ui5-link): introduce tooltip property (#8670)

The a11y experts suggested using our own property and not reusing the standard title property as title attribute will both present on the custom element and inside the shadow root. Having tooltip on the custom element and the title set at only one place is more reliable.
SAP · Apr 17, 2024 · ef64000 · ef64000
1 parent db37cf8
commit ef64000
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/docs/2-advanced/07-accessibility.md b/docs/2-advanced/07-accessibility.md
@@ -80,6 +80,7 @@ The mapping of the accessibility APIs to ARIA attributes is described in the fol
 | `checked`                   | `aria-checked`                                    | Defines whether the component is checked.                                                                                                                                                           |
 | `level`, `headerLevel`      | `aria-level`                                      | Defines the heading level of a title. Available options are: "H6" to "H1".                                                                                                                          |
 | `interactive`               | `tabindex`                                        | Defines if the component is interactive (focusable and pressable).                                                                                                                                  |
+| `tooltip`                   | `title`                                           | Defines the tooltip of the component.       
 
 ### accessibleName
 

diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs
@@ -5,7 +5,7 @@
 	target="{{target}}"
 	rel="{{_rel}}"
 	tabindex="{{effectiveTabIndex}}"
-	title="{{title}}"
+	title="{{tooltip}}"
 	?disabled="{{disabled}}"
 	aria-label="{{ariaLabelText}}"
 	aria-haspopup="{{_hasPopup}}"

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
@@ -123,11 +123,11 @@ class Link extends UI5Element implements ITabbable {
 	/**
 	 * Defines the tooltip of the component.
 	 * @default ""
-	 * @private
-	 * @since 1.18.0
+	 * @public
+	 * @since 2.0
 	 */
 	 @property()
-	 title!: string;
+	 tooltip!: string;
 
 	/**
 	 * Defines the component href.

diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
@@ -25,7 +25,7 @@
 
 <body class="link1auto">
 	<div class="group">
-		<ui5-link id="target-blank-link" title="Link with standard design" class="samples-big-margin-right" href="https://www.sap.com" target="_blank">Standard Link</ui5-link>
+		<ui5-link id="target-blank-link" tooltip="Link with standard design" class="samples-big-margin-right" href="https://www.sap.com" target="_blank">Standard Link</ui5-link>
 		<ui5-link class="samples-big-margin-right" href="https://www.sap.com" target="_blank" design="Subtle">Subtle link</ui5-link>
 		<ui5-link class="samples-big-margin-right" href="https://www.sap.com" target="_blank" disabled>Disabled</ui5-link>
 		<ui5-link class="samples-big-margin-right" href="https://www.sap.com" target="_blank" design="Emphasized">Emphasized</ui5-link>
@@ -39,7 +39,7 @@
 	<section class="group">
 		<h2>cross-origin</h2>
 		<ui5-link href="https://www.google.com" target="_blank" id="link">link</ui5-link><span>native span</span>
-		<ui5-link href="https://www.google.com" target="_blank" id="linkAccName" accessible-name="more info">link with accessible-name</ui5-link><span>native span</span>
+		<ui5-link href="https://www.google.com" target="_blank" id="linkAccName" accessible-name="more info" tooltip="more info">link with accessible-name</ui5-link><span>native span</span>
 	</section>
 
 	<section class="group">

diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js
@@ -87,9 +87,10 @@ describe("General API", () => {
 	});
 
 	it("setting accessible-name applied on the host element is reflected on the anchor tag", async () => {
-		const link = await browser.$("#linkAccName");
+		const linkShadow = await browser.$("#linkAccName").shadow$("a");
 
-		assert.strictEqual(await link.shadow$("a").getAttribute("aria-label"), "more info", "Attribute is reflected");
+		assert.strictEqual(await linkShadow.getAttribute("aria-label"), "more info", "aria-label attribute is set");
+		assert.strictEqual(await linkShadow.getAttribute("title"), "more info", "title attribute is set");
 	});