Skip to content

Commit a672788

Browse files
ilhan007ilhan007
authored
feat: add enableDefaultTooltips config option (#9559)
This configuration option defines whether components will display default tooltips in specific cases. Default tooltips are generally recommended to cover accessibility standards and typically you would not need to modify this setting. However, in rare cases you may want to implement custom tooltip visualisation and turn off the default tooltips. To do so, set enableDefaultTooltips to false. Fixes: #9494
1 parent b3c38f8 commit a672788

File tree

11 files changed

+151
-7
lines changed

11 files changed

+151
-7
lines changed

‎docs/2-advanced/01-configuration.md

+27
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ There are several configuration settings that affect all UI5 Web Components glob
1717
| [formatSettings](#formatSettings) | See the [Format settings](#formatSettings) section below | `{}` | Allows to override locale-specific configuration | Date/time components (`ui5-date-picker`, etc.) |
1818
| [fetchDefaultLanguage](#fetchDefaultLanguage) | `true`, `false` | `false` | Whether to fetch assets even for the default language | Framework |
1919
| [defaultFontLoading](#defaultFontLoading) | `true`, `false` | `true` | Whether to fetch default font faces | Framework |
20+
| [enableDefaultTooltips](#enableDefaultTooltips) | `true`, `false` | `true` | Whether to display default tooltips | Components (Icon, Button, RatingIndicator, etc.) |
2021
| [timezone](#timezone) | `Asia/Tokyo`, `Pacific/Apia`, `Asia/Kolkata`, `Europe/Sofia` and etc. | Your local time zone. | Allows to override your local time zone. | Date/time components (`ui5-date-picker`, etc.) |
2122
| [themeRoot](#themeRoot) | String to a URL - see the [themeRoot](#themeRoot) section below | N/A | Allows to set a URL to a Theme-designer-created custom theme. | All components |
2223

@@ -233,6 +234,25 @@ Example:
233234
}
234235
</script>
235236
```
237+
238+
### enableDefaultTooltips
239+
<a name="enableDefaultTooltips"></a>
240+
241+
This configuration option controls whether components will display default tooltips in specific cases.
242+
243+
Default tooltips are generally recommended to cover accessibility standards and typically you would not need to modify this setting.
244+
However, in rare cases you may want to implement custom tooltip visualization and turn off the default tooltips.
245+
To do so, set `enableDefaultTooltips` to `false`.
246+
247+
Example:
248+
```html
249+
<script data-ui5-config type="application/json">
250+
{
251+
"enableDefaultTooltips": false
252+
}
253+
</script>
254+
```
255+
236256
### timezone
237257
<a name="timezone"></a>
238258

@@ -349,6 +369,13 @@ import { getFetchDefaultLanguage, setFetchDefaultLanguage } from "@ui5/webcompon
349369
```js
350370
import { getDefaultFontLoading, setDefaultFontLoading } from "@ui5/webcomponents-base/dist/config/Fonts.js";
351371
```
372+
373+
- `enableDefaultTooltips`
374+
375+
```js
376+
import { getEnableDefaultTooltips, setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
377+
```
378+
352379
- `timezone` - can only be set initially in the configuration script.
353380

354381
```js

‎packages/base/bundle.esm.js

+2
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { getLanguage, setLanguage } from "./dist/config/Language.js";
3232
import { getCalendarType } from "./dist/config/CalendarType.js";
3333
import { getTheme, setTheme } from "./dist/config/Theme.js";
3434
import { getDefaultFontLoading } from "./dist/config/Fonts.js";
35+
import { getEnableDefaultTooltips } from "./dist/config/Tooltips.js";
3536
import { getThemeRoot, setThemeRoot } from "./dist/config/ThemeRoot.js";
3637
import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
3738
import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "./dist/config/FormatSettings.js";
@@ -55,6 +56,7 @@ window["sap-ui-webcomponents-bundle"] = {
5556
getFirstDayOfWeek,
5657
getLegacyDateCalendarCustomizing,
5758
getDefaultFontLoading,
59+
getEnableDefaultTooltips,
5860
},
5961
getCurrentRuntimeIndex,
6062
getIconNames,

‎packages/base/src/InitialConfiguration.ts

+8
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ type InitialConfig = {
2222
formatSettings: FormatSettings,
2323
fetchDefaultLanguage: boolean,
2424
defaultFontLoading: boolean,
25+
enableDefaultTooltips: boolean,
2526
};
2627

2728
let initialConfig: InitialConfig = {
@@ -37,6 +38,7 @@ let initialConfig: InitialConfig = {
3738
formatSettings: {},
3839
fetchDefaultLanguage: false,
3940
defaultFontLoading: true,
41+
enableDefaultTooltips: true,
4042
};
4143

4244
/* General settings */
@@ -80,6 +82,11 @@ const getDefaultFontLoading = () => {
8082
return initialConfig.defaultFontLoading;
8183
};
8284

85+
const getEnableDefaultTooltips = () => {
86+
initConfiguration();
87+
return initialConfig.enableDefaultTooltips;
88+
};
89+
8390
/**
8491
* Get the configured calendar type
8592
* @returns { String } the name of the configured calendar type
@@ -225,4 +232,5 @@ export {
225232
getTimezone,
226233
getFormatSettings,
227234
getDefaultFontLoading,
235+
getEnableDefaultTooltips,
228236
};

‎packages/base/src/config/Tooltips.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { getEnableDefaultTooltips as getConfiguredEnableDefaultTooltips } from "../InitialConfiguration.js";
2+
3+
let _enableDefaultTooltips: boolean;
4+
5+
/**
6+
* Returns if the "enableDefaultTooltips" configuration is set.
7+
* @public
8+
* @since 2.1.0
9+
* @returns { boolean }
10+
*/
11+
const getEnableDefaultTooltips = (): boolean => {
12+
if (_enableDefaultTooltips === undefined) {
13+
_enableDefaultTooltips = getConfiguredEnableDefaultTooltips();
14+
}
15+
16+
return _enableDefaultTooltips;
17+
};
18+
19+
/**
20+
* Defines the "enableDefaultTooltips" setting.
21+
*
22+
* - When set to "true" (default), the components will display default tooltips.
23+
* - When set to "false", the components will NOT display default tooltips.
24+
*
25+
* @public
26+
* @since 2.1.0
27+
* @param { boolean } enableDefaultTooltips
28+
*/
29+
const setEnableDefaultTooltips = (enableDefaultTooltips: boolean) => {
30+
_enableDefaultTooltips = enableDefaultTooltips;
31+
};
32+
33+
export {
34+
getEnableDefaultTooltips,
35+
setEnableDefaultTooltips,
36+
};

‎packages/base/test/pages/ConfigurationScript.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
"noConflict": {
3636
"events": ["selection-change", "header-click"]
3737
},
38-
"defaultFontLoading": false
38+
"defaultFontLoading": false,
39+
"enableDefaultTooltips": false
3940
}
4041
</script>
4142

‎packages/base/test/specs/ConfigurationScript.spec.js

+8
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,12 @@ describe("Configuration script has effect", () => {
8585
});
8686
assert.strictEqual(res, false, "defaultFontLoading is false");
8787
});
88+
89+
it("Tests that enableDefaultTooltips is applied", async () => {
90+
const res = await browser.executeAsync(done => {
91+
const config = window['sap-ui-webcomponents-bundle'].configuration;
92+
done(config.getEnableDefaultTooltips());
93+
});
94+
assert.strictEqual(res, false, "enableDefaultTooltips is false");
95+
});
8896
});

‎packages/main/src/Button.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
} from "@ui5/webcomponents-base/dist/Device.js";
2626
import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
2727
import { submitForm, resetForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
28+
import { getEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
2829
import type { IFormElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
2930
import ButtonDesign from "./types/ButtonDesign.js";
3031
import ButtonType from "./types/ButtonType.js";
@@ -359,7 +360,7 @@ class Button extends UI5Element implements IButton, IFormElement {
359360
this.hasEndIcon = !!this.endIcon;
360361
this.iconOnly = this.isIconOnly;
361362

362-
this.buttonTitle = this.tooltip || await getIconAccessibleName(this.icon);
363+
this.buttonTitle = this.tooltip || await this.getDefaultTooltip();
363364
}
364365

365366
_onclick(e: MouseEvent) {
@@ -501,6 +502,14 @@ class Button extends UI5Element implements IButton, IFormElement {
501502
};
502503
}
503504

505+
getDefaultTooltip() {
506+
if (!getEnableDefaultTooltips()) {
507+
return;
508+
}
509+
510+
return getIconAccessibleName(this.icon);
511+
}
512+
504513
get buttonTypeText() {
505514
return Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);
506515
}
@@ -524,7 +533,7 @@ class Button extends UI5Element implements IButton, IFormElement {
524533
}
525534

526535
get showIconTooltip() {
527-
return this.iconOnly && !this.tooltip;
536+
return getEnableDefaultTooltips() && this.iconOnly && !this.tooltip;
528537
}
529538

530539
get ariaLabelText() {

‎packages/main/src/RatingIndicator.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
22
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
33
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
4-
4+
import { getEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
55
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
66
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
77
import {
@@ -295,8 +295,11 @@ class RatingIndicator extends UI5Element {
295295
return this.disabled ? "-1" : tabindex || "0";
296296
}
297297

298-
get ratingTooltip() {
299-
return this.tooltip || this.defaultTooltip;
298+
get ratingTooltip(): string | undefined {
299+
if (this.tooltip) {
300+
return this.tooltip;
301+
}
302+
return getEnableDefaultTooltips() ? this.defaultTooltip : undefined;
300303
}
301304

302305
get defaultTooltip() {

‎packages/main/src/SegmentedButtonItem.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
33
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
44
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
55
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
6+
import { getEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
67
import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
78
import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
89
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
@@ -206,7 +207,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
206207
}
207208

208209
get showIconTooltip() {
209-
return this.iconOnly && !this.tooltip;
210+
return getEnableDefaultTooltips() && this.iconOnly && !this.tooltip;
210211
}
211212

212213
static async onDefine() {

‎packages/main/test/pages/base/Tooltips.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<title>Tooltips</title>
8+
<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
9+
</head>
10+
11+
<body class="card1auto">
12+
<ui5-icon name="settings"></ui5-icon>
13+
<ui5-icon name="settings" show-tooltip></ui5-icon>
14+
<ui5-button id="btn" icon="settings"></ui5-button>
15+
<ui5-rating-indicator id="rt" icon="settings"></ui5-rating-indicator>
16+
<ui5-toggle-button icon="settings"></ui5-toggle-button>
17+
<ui5-segmented-button id="segBtn">
18+
<ui5-segmented-button-item id="segBtnItem" icon="add"></ui5-segmented-button-item>
19+
<ui5-segmented-button-item id="segBtnItem2" icon="settings"></ui5-segmented-button-item>
20+
<ui5-segmented-button-item id="segBtnItem3" icon="activate"></ui5-segmented-button-item>
21+
</ui5-segmented-button>
22+
</body>

‎packages/main/test/specs/base/Tooltips.spec.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { assert } from "chai";
2+
3+
describe("Default Tooltips", () => {
4+
before(async () => {
5+
await browser.url(`test/pages/base/Tooltips.html?sap-ui-enableDefaultTooltips=false`);
6+
});
7+
8+
it("Tooltips turned off", async () => {
9+
const btn = await browser.$("#btn").shadow$(".ui5-button-root");
10+
const btnIcon = await browser.$("#btn").shadow$(".ui5-button-icon");
11+
const rt = await browser.$("#rt").shadow$(".ui5-rating-indicator-root");
12+
const segBtnItem = await browser.$("#segBtnItem").shadow$(".ui5-segmented-button-item-root");
13+
const segBtnItemIcon = await browser.$("#segBtnItem").shadow$(".ui5-segmented-button-item-icon");
14+
15+
const btnTitle = await btn.getAttribute("title");
16+
const btnIconTitle = await btnIcon.getAttribute("title");
17+
const rtTitle = await rt.getAttribute("title");
18+
const segBtnItemTitle = await segBtnItem.getAttribute("title");
19+
const segBtnItemIconTitle = await segBtnItemIcon.getAttribute("title");
20+
21+
assert.notOk(btnTitle, "An icon only Button has no default tooltip.");
22+
assert.notOk(btnIconTitle, "An icon only Button icon has no default tooltip.");
23+
assert.notOk(rtTitle, "The Rating Indicator has no default tooltip.");
24+
assert.notOk(segBtnItemTitle, "An icon only Segmented Button Item has no default tooltip");
25+
assert.notOk(segBtnItemIconTitle, "An icon only Segmented Button Item icon has no default tooltip");
26+
});
27+
});

0 commit comments

Comments
 (0)