feat(ui5-shellbar): add branding area accessibility attributes (#11238)

Enhance accessibility for the ShellBar component by adding support for custom
accessibility attributes on the branding/primary title area. This allows
developers to provide consistent screen reader announcements for menu buttons
across different pages, regardless of the changing page title content.

Fixes: #6826, #8708

Author: kgogov

packages/fiori/src/ShellBar.ts

@@ -75,13 +75,15 @@ type ShellBarLogoAccessibilityAttributes = {
 }
 type ShellBarProfileAccessibilityAttributes = Pick<AccessibilityAttributes, "name" | "expanded" | "hasPopup">;
 type ShellBarAreaAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded">;
+type ShellBarBrandingAccessibilityAttributes = Pick<AccessibilityAttributes, "name">;
 type ShellBarAccessibilityAttributes = {
 	logo?: ShellBarLogoAccessibilityAttributes
 	notifications?: ShellBarAreaAccessibilityAttributes
 	profile?: ShellBarProfileAccessibilityAttributes,
 	product?: ShellBarAreaAccessibilityAttributes
 	search?: ShellBarAreaAccessibilityAttributes
 	overflow?: ShellBarAreaAccessibilityAttributes
+	branding?: ShellBarBrandingAccessibilityAttributes
 };
 
 type ShellBarNotificationsClickEventDetail = {
@@ -377,6 +379,7 @@ class ShellBar extends UI5Element {
 	 * - **product** - `product.expanded` and `product.hasPopup`.
 	 * - **search** - `search.hasPopup`.
 	 * - **overflow** - `overflow.expanded` and `overflow.hasPopup`.
+	 * - **branding** - `branding.name`.
 	 *
 	 * The accessibility attributes support the following values:
 	 *
@@ -1499,6 +1502,10 @@ class ShellBar extends UI5Element {
 		return ShellBar.i18nBundle.getText(SHELLBAR_OVERFLOW);
 	}
 
+	get _brandingText() {
+		return this.accessibilityAttributes.branding?.name || this.primaryTitle;
+	}
+
 	get hasContentItems() {
 		return this.contentItems.length > 0;
 	}
@@ -1598,6 +1605,12 @@ class ShellBar extends UI5Element {
 					expanded: overflowExpanded === undefined ? this._overflowPopoverExpanded : overflowExpanded,
 				},
 			},
+			branding: {
+				"title": this._brandingText,
+				"accessibilityAttributes": {
+					name: this.accessibilityAttributes.branding?.name,
+				},
+			},
 		};
 	}
 

packages/fiori/src/ShellBarTemplate.tsx

@@ -29,6 +29,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 										onClick={this._headerPress}
 										aria-haspopup="menu"
 										aria-expanded={this._menuPopoverExpanded}
+										aria-label={this._brandingText}
 										data-ui5-stable="menu"
 										tabIndex={0}>
 										{this.showLogoInMenuButton && (
@@ -290,7 +291,7 @@ function combinedLogo(this: ShellBar) {
 			tabIndex={0}
 			onKeyDown={this._logoKeydown}
 			onKeyUp={this._logoKeyup}
-			aria-label={this._logoAreaText}>
+			aria-label={this.accessibilityAttributes.branding?.name || this._logoAreaText}>
 			{this.hasLogo && (
 				<span
 					class="ui5-shellbar-logo"