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 · 426e6c0 · 426e6c0
1 parent 82894cc
commit 426e6c0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -109,6 +109,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
 		 */
@@ -1021,7 +1036,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get _profileText() {
-		return this.i18nBundle.getText(SHELLBAR_PROFILE);
+		return this.accessibilityTexts.profileButtonTitle || this.i18nBundle.getText(SHELLBAR_PROFILE);
 	}
 
 	get _productsText() {

diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -225,6 +225,10 @@ <h3>ShellBar in Compact</h3>
 		<ui5-shellbar-item icon="discussion" count="2" id="test-invalidation-item"/>
 	</ui5-shellbar>
 
+	<ui5-shellbar id="sbAcc">
+		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+	</ui5-shellbar>
+
 	<script>
 		mySearch.addEventListener("suggestionItemSelect", function (event) {
 			 console.log(event);
@@ -288,6 +292,10 @@ <h3>ShellBar in Compact</h3>
 				window["custom-item-popover"].openBy(event.detail.targetRef);
 			});
 		});
+
+		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
@@ -25,6 +25,31 @@ const getCustomActionProp = (id, pos, prop) => {
 describe("Component Behavior", () => {
 	browser.url("http://localhost:8081/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 () => {
+			const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar")
+			const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
+			const firstMenuItem = await menuPopover.$("ui5-list > ui5-li");
+
+			await primaryTitle.click();
+			await firstMenuItem.click();
+
+			assert.strictEqual(await menuPopover.getProperty("opened"), false, "Count property propagates to ui5-button");
+		});
+	});
+
+
 	describe("ui5-shellbar-item", () => {
 		it("tests count property", () => {
 			const shellbar = browser.$("#shellbarwithitems");