feat(ui5-shellbar): resolve merge conflicts

packages/fiori/src/ShellBar.hbs

@@ -71,11 +71,13 @@
 	{{/if}}
 		<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
 			{{#if showAdditionalContext}}
-				<div 
-					style="{{styles.additionalContext.start.separator}}" 
+				<div
+					style="{{styles.additionalContext.start.separator}}"
 					class="ui5-shellbar-separator ui5-shellbar-separator-start">
 				</div>
-				<div class="ui5-shellbar-overflow-container-additional-content">
+				<div class="ui5-shellbar-overflow-container-additional-content"
+					 aria-label="{{_additionalContextText}}"
+					 role="{{_additionalContextRole}}">
 					{{#each additionalContextStart}}
 						<slot name="{{this._individualSlot}}"></slot>
 					{{/each}}
@@ -84,12 +86,13 @@
 						<slot name="{{this._individualSlot}}"></slot>
 					{{/each}}
 				</div>
-				<div 
-					style="{{styles.additionalContext.end.separator}}" 
+				<div
+					style="{{styles.additionalContext.end.separator}}"
 					class="ui5-shellbar-separator ui5-shellbar-separator-end">
 				</div>
 			{{/if}}
-			<div class="ui5-shellbar-overflow-container-right-child">
+			<div class="ui5-shellbar-overflow-container-right-child"
+				 role="{{_rightChildRole}}">
 				{{#if _isFullVariant}}
 					{{#if _isXXLBreakpoint}}
 						{{#if hasSearchField}}
@@ -127,13 +130,15 @@
 								data-ui5-notifications-count="{{notificationsCount}}"
 								data-ui5-stable="toggle-search"
 								@click={{_handleSearchIconPress}}
-								tooltip="{{_searchText}}"
+								tooltip="{{_searchBtnOpen}}"
+								aria-label="{{_searchBtnOpen}}"
+								aria-expanded="{{_searchFieldExpanded}}"
 								.accessibilityAttributes={{accInfo.search.accessibilityAttributes}}
 							></ui5-button>
 						{{/if}}
 					{{/unless}}
 					{{#if hasAssistant}}
-						<slot name="assistant"></slot>
+							<slot name="assistant"></slot>
 					{{/if}}
 				{{/if}}
 
@@ -188,6 +193,9 @@
 							data-ui5-text="Product Switch"
 							@click={{_handleProductSwitchPress}}
 							tooltip="{{_productsText}}"
+							aria-label="{{_productSwitchBtnText}}"
+							aria-haspopup="dialog"
+							aria-expanded="{{accInfo.products.accessibilityAttributes.expanded}}"
 							.accessibilityAttributes={{accInfo.products.accessibilityAttributes}}
 							data-ui5-stable="product-switch"
 						></ui5-button>
@@ -204,6 +212,8 @@
 		@click={{_handleProfilePress}}
 		tooltip="{{_profileText}}"
 		class="ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-no-overflow-button ui5-shellbar-items-for-arrow-nav"
+		aria-label="{{imageBtnText}}"
+		aria-haspopup="dialog"
 		.accessibilityAttributes={{accInfo.profile.accessibilityAttributes}}
 		data-ui5-stable="profile"
 	>
@@ -221,11 +231,15 @@
 {{/inline}}
 
 {{#*inline "combinedLogo"}}
-<div class="ui5-shellbar-logo-area" @click="{{_logoPress}}" tabindex="0" @keydown="{{_logoKeydown}}" @keyup="{{_logoKeyup}}">
+<div class="ui5-shellbar-logo-area"
+	@click="{{_logoPress}}"
+	tabindex="0"
+	@keydown="{{_logoKeydown}}"
+	@keyup="{{_logoKeyup}}"
+	role="{{accLogoRole}}"
+	aria-label="{{_logoAreaText}}">
 	{{#if hasLogo}}
 		<span class="ui5-shellbar-logo"
-			role="{{accLogoRole}}"
-			aria-label="{{_logoText}}"
 			title="{{_logoText}}"
 			@click="{{_logoPress}}"
 			@keydown="{{_logoKeydown}}"

packages/fiori/src/ShellBar.ts

@@ -15,6 +15,7 @@ import {
 	isLeft,
 	isRight,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
@@ -55,7 +56,13 @@ import {
 	SHELLBAR_PROFILE,
 	SHELLBAR_PRODUCTS,
 	SHELLBAR_SEARCH,
+	SHELLBAR_SEARCH_FIELD,
 	SHELLBAR_OVERFLOW,
+	SHELLBAR_LOGO_AREA,
+	SHELLBAR_ADDITIONAL_CONTEXT,
+	SHELLBAR_SEARCHFIELD_DESCRIPTION,
+	SHELLBAR_SEARCH_BTN_OPEN,
+	SHELLBAR_PRODUCT_SWITCH_BTN,
 } from "./generated/i18n/i18n-defaults.js";
 
 type LowercaseString<T> = T extends string ? Lowercase<T> : never;
@@ -628,15 +635,22 @@ class ShellBar extends UI5Element {
 	_getNavigableContent() {
 		return [
 			...this.startButton,
+			...this.logo,
 			...this.shadowRoot!.querySelectorAll(".ui5-shellbar-logo"),
 			...this.shadowRoot!.querySelectorAll(".ui5-shellbar-logo-area"),
 			...this.shadowRoot!.querySelectorAll(".ui5-shellbar-menu-button"),
 			...this.additionalContextStart,
 			...this.additionalContextEnd,
+			...this._getRightChildItems(),
+		] as HTMLElement[];
+	}
+
+	_getRightChildItems() {
+		return [
 			...this.shadowRoot!.querySelectorAll(".ui5-shellbar-search-item-for-arrow-nav"),
+			...this.searchField,
 			...this.assistant,
 			...this.shadowRoot!.querySelectorAll(".ui5-shellbar-items-for-arrow-nav"),
-			...this.profile,
 		] as HTMLElement[];
 	}
 
@@ -704,6 +718,8 @@ class ShellBar extends UI5Element {
 	}
 
 	onBeforeRendering() {
+		const input = this.searchField[0]?.shadowRoot!.querySelector(".ui5-input-inner");
+
 		this.withLogo = this.hasLogo;
 
 		this._hiddenIcons = this._itemsInfo.filter(info => {
@@ -716,6 +732,12 @@ class ShellBar extends UI5Element {
 			return isHidden && isSet && !shouldStayOnScreen;
 		});
 
+		if (input) {
+			input.role = "searchbox";
+			// Temporary workaround: Adding aria-description to the aria-label since the input element lacks an aria-description.
+			input.ariaLabel = `${this._searchFieldText} ${this._searchFieldDescription}`;
+		}
+
 		this._observeMenuItems();
 	}
 
@@ -1357,6 +1379,10 @@ class ShellBar extends UI5Element {
 		return this.menuItems.length > 0;
 	}
 
+	get imageBtnText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get _shellbarText() {
 		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
 	}
@@ -1373,6 +1399,60 @@ class ShellBar extends UI5Element {
 		return ShellBar.i18nBundle.getText(SHELLBAR_CANCEL);
 	}
 
+	get _logoAreaText() {
+		const primaryTitle = this.primaryTitle ?? "";
+		const secondaryTitle = this.secondaryTitle ?? "";
+
+		return ShellBar.i18nBundle.getText(SHELLBAR_LOGO_AREA, primaryTitle, secondaryTitle);
+	}
+
+	get _additionalContextText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT);
+	}
+
+	get _searchFieldDescription() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCHFIELD_DESCRIPTION);
+	}
+
+	get _additionalContextRole() {
+		const additionalContext = [...this.additionalContextEnd, ...this.additionalContextStart];
+
+		if (additionalContext.length === 1) {
+			return;
+		}
+
+		return "group";
+	}
+
+	get _rightChildRole() {
+		const items = this._getRightChildItems();
+		const visibleItems = items.filter(item => {
+			return this._isVisible(item);
+		});
+
+		if (visibleItems.length === 1) {
+			return;
+		}
+
+		return "toolbar";
+	}
+
+	get _searchFieldExpanded() {
+		return this.showSearchField;
+	}
+
+	get _searchFieldText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH_FIELD);
+	}
+
+	get _searchBtnOpen() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH_BTN_OPEN);
+	}
+
+	get _productSwitchBtnText() {
+		return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCT_SWITCH_BTN);
+	}
+
 	get _showFullWidthSearch() {
 		const targetContainer = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-overflow-container-additional-content");
 		const targetWidth = targetContainer?.offsetWidth || 0;

packages/fiori/src/i18n/messagebundle.properties

@@ -143,6 +143,15 @@ SHELLBAR_LABEL = Shell Bar
 #XACT: ARIA announcement for the logo button
 SHELLBAR_LOGO = Logo
 
+#XACT: ARIA announcement for the logo area
+SHELLBAR_LOGO_AREA = SAP {0} {1} Home
+
+#XACT: ARIA announcement for the main navigation button
+SHELLBAR_ADDITIONAL_CONTEXT = Additional Info
+
+#XACT: ARIA description announcement for the search field
+SHELLBAR_SEARCHFIELD_DESCRIPTION = Search results will be shown main area
+
 #XACT: ARIA announcement for the notifications button
 SHELLBAR_NOTIFICATIONS = {0} Notifications
 
@@ -155,12 +164,22 @@ SHELLBAR_PROFILE = Profile
 #XACT: ARIA announcement for the products button
 SHELLBAR_PRODUCTS = Products
 
+#XACT: ARIA announcement for the ProductSwitch button
+SHELLBAR_PRODUCT_SWITCH_BTN = Product Switcher
+
 #XACT: ARIA announcement of ProductSwitch container
 PRODUCT_SWITCH_CONTAINER_LABEL=Products
 
 #XACT: ARIA announcement for the search button
 SHELLBAR_SEARCH = Search
 
+#XACT: ARIA announcement for the search field
+SHELLBAR_SEARCH_FIELD = Search Field
+
+#XACT: ARIA announcement for the search button
+SHELLBAR_SEARCH_BTN_OPEN = Open Search
+
+
 #XACT: ARIA announcement for the more button
 SHELLBAR_OVERFLOW = More