feat(ui5-shellbar): add accessibility enhancements

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" | "role">;
 type ShellBarAccessibilityAttributes = {
 	logo?: ShellBarLogoAccessibilityAttributes
 	notifications?: ShellBarAreaAccessibilityAttributes
 	profile?: ShellBarProfileAccessibilityAttributes,
 	product?: ShellBarAreaAccessibilityAttributes
 	search?: ShellBarAreaAccessibilityAttributes
 	overflow?: ShellBarAreaAccessibilityAttributes
+	branding?: ShellBarBrandingAccessibilityAttributes
 };
 
 type ShellBarNotificationsClickEventDetail = {
@@ -351,6 +353,7 @@ class ShellBar extends UI5Element {
 	 * - **product** - `product.expanded` and `product.hasPopup`.
 	 * - **search** - `search.hasPopup`.
 	 * - **overflow** - `overflow.expanded` and `overflow.hasPopup`.
+	 * - **branding** - `branding.role` and `branding.name`.
 	 *
 	 * The accessibility attributes support the following values:
 	 *
@@ -1422,6 +1425,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;
 	}
@@ -1520,6 +1527,13 @@ class ShellBar extends UI5Element {
 					hasPopup: this.accessibilityAttributes.overflow?.hasPopup || "menu" as const,
 					expanded: overflowExpanded === undefined ? this._overflowPopoverExpanded : overflowExpanded,
 				},
+				branding: {
+					"title": this._brandingText,
+					"accessibilityAttributes": {
+						role: this.accessibilityAttributes.branding?.role,
+						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.accessibilityAttributes.branding?.name || this.primaryTitle}
 										data-ui5-stable="menu"
 										tabIndex={0}>
 										{this.showLogoInMenuButton && (
@@ -278,13 +279,13 @@ function singleLogo(this: ShellBar) {
 function combinedLogo(this: ShellBar) {
 	return (
 		<div
-			role={this.accLogoRole}
+			role={this.accessibilityAttributes.branding?.role || this.accLogoRole}
 			class="ui5-shellbar-logo-area"
 			onClick={this._logoPress}
 			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"