diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index e5ffd3fb2931..493bcc296327 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -75,6 +75,7 @@ type ShellBarLogoAccessibilityAttributes = { } type ShellBarProfileAccessibilityAttributes = Pick; type ShellBarAreaAccessibilityAttributes = Pick; +type ShellBarBrandingAccessibilityAttributes = Pick; type ShellBarAccessibilityAttributes = { logo?: ShellBarLogoAccessibilityAttributes notifications?: ShellBarAreaAccessibilityAttributes @@ -82,6 +83,7 @@ type ShellBarAccessibilityAttributes = { 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, + }, + }, }; } diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx index 7adbc1055312..4805dfbdb5a1 100644 --- a/packages/fiori/src/ShellBarTemplate.tsx +++ b/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 && (