feat(ui5-shellbar): introduce accessibilityTexts property (#4377)

New property from type Object, called accessibilityTexts is introduced to allow customization of some internal parts of the ShellBar web component via stable API. Currently the only thing available on the object is the profileButtonTitle to define the profile button tooltip, showing up on hover. Fixes: #4009
SAP · Nov 23, 2021 · f762e76 · f762e76
1 parent 9abdaba
commit f762e76
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -111,6 +111,21 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility texts
+		 * for even further customization.
+		 *
+		 * It supports the following fields:
+		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityTexts: {
+			type: Object,
+		},
+
 		/**
 		 * @private
 		 */
@@ -1129,7 +1144,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get _profileText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
+		return this.accessibilityTexts.profileButtonTitle || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
 	}
 
 	get _productsText() {

diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -217,6 +217,10 @@ <h3>ShellBar in Compact</h3>
 
 	<ui5-toast id="wcToastTC">Custom Action Fired</ui5-toast>
 
+	<ui5-shellbar id="sbAcc">
+		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+	</ui5-shellbar>
+
 	<script>
 		mySearch.addEventListener("suggestionItemSelect", function (event) {
 			 console.log(event);
@@ -294,6 +298,10 @@ <h3>ShellBar in Compact</h3>
 				window["press-input3"].value = event.target.id;
 			});
 		});
+
+		sbAcc.accessibilityTexts = {
+			profileButtonTitle: "John Dow",
+		};
 	</script>
 </body>
 </html>
diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
@@ -28,6 +28,15 @@ describe("Component Behavior", () => {
 		await browser.url(`http://localhost:${PORT}/test-resources/pages/ShellBar.html`);
 	});
 
+	describe("Аccessibility", () => {
+		it("tests accessibilityTexts property", async () => {
+			const PROFILE_BTN_CUSTOM_TOOLTIP = "John Dow";
+			const sb = await browser.$("#sbAcc");
+
+			assert.strictEqual(await sb.getProperty("_profileText"), PROFILE_BTN_CUSTOM_TOOLTIP,
+				"Profile button tooltip can be cutomized.");
+		});
+	});
 
 	describe("ui5-shellbar menu", () => {
 		it("tests close on content click", async () => {