fix(ui5-button): adjust tooltips display (#11268)

unazko · web-flow · commit 9f0d907e74a5 · 2025-04-23T13:36:52.000+03:00
Issue: - The default icon tooltip is displayed over the ui5-button even though there is a text in the ui5-button's slot. Solution: - The default icon tooltip should only be shown when the ui5-button is in icon-only mode according to the UX guidelines. Fixes: #10824
diff --git a/packages/main/cypress/specs/Button.cy.tsx b/packages/main/cypress/specs/Button.cy.tsx
@@ -238,6 +238,13 @@ describe("Accessibility", () => {
 			.should("have.attr", "title", "Download");
 	});
 
+	it("tooltip not displayed when there is a text", () => {
+		cy.mount(<Button icon="home">Action</Button>);
+
+		cy.get("[ui5-button]")	
+			.should("not.have.attr", "title");
+	});
+
 	it("aria-expanded is properly applied on the button tag", () => {
 		cy.mount(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
@@ -367,7 +367,8 @@ class Button extends UI5Element implements IButton {
 		this.hasEndIcon = !!this.endIcon;
 		this.iconOnly = this.isIconOnly;
 
-		this.buttonTitle = this.tooltip || await this.getDefaultTooltip();
+		const defaultTooltip = await this.getDefaultTooltip();
+		this.buttonTitle = this.iconOnly ? this.tooltip ?? defaultTooltip : this.tooltip;
 	}
 
 	_setBadgeOverlayStyle() {
@@ -514,10 +515,6 @@ class Button extends UI5Element implements IButton {
 		return this.nonInteractive ? -1 : Number.parseInt(this.forcedTabIndex);
 	}
 
-	get showIconTooltip() {
-		return getEnableDefaultTooltips() && this.iconOnly && !this.tooltip;
-	}
-
 	get ariaLabelText() {
 		return getEffectiveAriaLabelText(this);
 	}
diff --git a/packages/main/src/ButtonTemplate.tsx b/packages/main/src/ButtonTemplate.tsx
@@ -48,7 +48,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 					name={this.icon}
 					mode="Decorative"
 					part="icon"
-					showTooltip={this.showIconTooltip}
 				/>
 			}
 
diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
@@ -18,6 +18,8 @@
 </head>
 
 <body class="button1auto">
+	<ui5-button design="Negative" icon="decline">Reject</ui5-button>
+	<ui5-button design="Positive" icon="add">Add</ui5-button>
 	<ui5-button icon="home" id="icon-only-comment"><!----><!----></ui5-button>
 	<ui5-button icon="text" id="icon-only-blank-text"> </ui5-button>
 	<ui5-button accessible-role="Link" id="button-role-link"> Navigation Button </ui5-button>

Original file line number	Diff line number	Diff line change
`@@ -367,7 +367,8 @@ class Button extends UI5Element implements IButton {`
`367`	`367`	`this.hasEndIcon = !!this.endIcon;`
`368`	`368`	`this.iconOnly = this.isIconOnly;`
`369`	`369`
`370`		`- this.buttonTitle = this.tooltip \|\| await this.getDefaultTooltip();`
	`370`	`+ const defaultTooltip = await this.getDefaultTooltip();`
	`371`	`+ this.buttonTitle = this.iconOnly ? this.tooltip ?? defaultTooltip : this.tooltip;`
`371`	`372`	`}`
`372`	`373`
`373`	`374`	`_setBadgeOverlayStyle() {`
`@@ -514,10 +515,6 @@ class Button extends UI5Element implements IButton {`
`514`	`515`	`return this.nonInteractive ? -1 : Number.parseInt(this.forcedTabIndex);`
`515`	`516`	`}`
`516`	`517`
`517`		`- get showIconTooltip() {`
`518`		`- return getEnableDefaultTooltips() && this.iconOnly && !this.tooltip;`
`519`		`- }`
`520`		`-`
`521`	`518`	`get ariaLabelText() {`
`522`	`519`	`return getEffectiveAriaLabelText(this);`
`523`	`520`	`}`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {`
`48`	`48`	`name={this.icon}`
`49`	`49`	`mode="Decorative"`
`50`	`50`	`part="icon"`
`51`		`- showTooltip={this.showIconTooltip}`
`52`	`51`	`/>`
`53`	`52`	`}`
`54`	`53`