feat(ui5-rating-indicator): introduce tooltip property (#7687)

SAP · Oct 12, 2023 · f2668b6 · f2668b6
1 parent 9d5a3d1
commit f2668b6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
@@ -14,7 +14,7 @@
 	@focusout="{{_onfocusout}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
-	title="{{tooltip}}"
+	title="{{ratingTooltip}}"
 	aria-label="{{_ariaLabel}}"
 >
 	<ul class="ui5-rating-indicator-list"

diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts
@@ -187,6 +187,18 @@ class RatingIndicator extends UI5Element {
 	@property({ type: Boolean })
 	required!: boolean;
 
+	/**
+	 * Defines the tooltip of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.RatingIndicator.prototype.tooltip
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.19.0
+	 */
+	@property()
+	tooltip!: string;
+
 	/**
 	 * @private
 	 */
@@ -315,8 +327,8 @@ class RatingIndicator extends UI5Element {
 		return this.disabled ? "-1" : tabindex || "0";
 	}
 
-	get tooltip() {
-		return this.getAttribute("title") || this.defaultTooltip;
+	get ratingTooltip() {
+		return this.tooltip || this.defaultTooltip;
 	}
 
 	get defaultTooltip() {

diff --git a/packages/main/test/pages/RatingIndicator.html b/packages/main/test/pages/RatingIndicator.html
@@ -63,7 +63,7 @@ <h3>disabled</h3>
 	<br>
 
 	<h3>RatingIndicator with title</h3>
-	<ui5-rating-indicator id="rating-indicator-title" title="Test" accessible-name="Hello World"></ui5-rating-indicator>
+	<ui5-rating-indicator id="rating-indicator-title" tooltip="Test" accessible-name="Hello World"></ui5-rating-indicator>
 	<br>
 	<br>
 	<br>

diff --git a/packages/main/test/specs/RatingIndicator.spec.js b/packages/main/test/specs/RatingIndicator.spec.js
@@ -116,11 +116,11 @@ describe("Rating Indicator general interaction", () => {
 		assert.strictEqual(await ratingIndicatorList.getAttribute("aria-hidden"), "true", "aria-hidden is set");
 	});
 
-	it("Tests ACC attrs - title attribute provided", async () => {
+	it("Tests ACC attrs - tooltip property", async () => {
 		const ratingIndicator = await browser.$("#rating-indicator-title").shadow$(".ui5-rating-indicator-root");
 		const TOOLTIP = "Test";
 
-		assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The title attribute is rendered in the inner div as well.");
+		assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The tooltip property is rendered as a title in the inner div.");
 	});
 
 	it("Tests ACC attrs - required property add aria-description", async () => {

diff --git a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts
@@ -32,6 +32,7 @@ const Template: UI5StoryArgs<RatingIndicator, StoryArgsSlots> = (args) => html`
 	?disabled="${ifDefined(args.disabled)}"
 	?readonly="${ifDefined(args.readonly)}"
 	?required="${ifDefined(args.required)}"
+	tooltip="${ifDefined(args.tooltip)}"
 	accessible-name="${ifDefined(args.accessibleName)}"
 	accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
 ></ui5-rating-indicator>`;