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

Author: ilhan007

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() {

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>

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");