feat(ui5-shellbar): implement accessibility spec

packages/fiori/src/ShellBar.hbs

@@ -1,21 +1,37 @@
 <div
 	class="{{classes.wrapper}}"
 	dir="{{rtl}}"
+	role="banner"
+	aria-label="{{_shellbarText}}"
 >
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
 
 		{{#if startButton.length}}
 				<slot name="startButton"></slot>
 		{{/if}}
 
-		{{#unless interactiveLogo}}
-			<img class="ui5-shellbar-logo" src="{{logo}}" @click="{{_logoPress}}" />
-		{{/unless}}
+		{{#if hasNonInteractiveLogo}}
+			<img class="ui5-shellbar-logo"
+				src="{{logo}}"
+				@click="{{_logoPress}}"
+				role="button"
+				aria-label="{{_logoText}}"
+				title="{{_logoText}}"
+				@keydown="{{_logoKeydown}}"
+				@keyup="{{_logoKeyup}}"
+				tabindex="0"
+			/>
+		{{/if}}
 
 		{{#if showArrowDown}}
-			<button tabindex="{{menuBtnTabindex}}" class="{{classes.button}}" @click="{{_header.press}}">
-				{{#if interactiveLogo}}
-					<img class="ui5-shellbar-logo" src="{{logo}}" @click="{{_logoPress}}" />
+			<button tabindex="{{menuBtnTabindex}}"
+				class="{{classes.button}}"
+				@click="{{_header.press}}"
+				aria-haspopup="{{menuBtnHasPopup}}"
+				aria-expanded="{{menuPopoverExpanded}}"
+			>
+				{{#if hasInteractiveLogo}}
+					<img class="ui5-shellbar-logo" src="{{logo}}"/>
 				{{/if}}
 
 				{{#if primaryTitle}}
@@ -35,6 +51,8 @@
 		{{#if showCoPilot}}
 			<div class="ui5-shellbar-copilot-wrapper"
 				tabindex="0"
+				aria-label="{{_copilotText}}"
+				title="{{_copilotText}}"
 				@keydown="{{_coPilotKeydown}}"
 				@keyup="{{_coPilotKeyup}}"
 				?active="{{coPilotActive}}">
@@ -66,6 +84,8 @@
 					data-ui5-text="Search"
 					data-ui5-notification-count="{{notificationCount}}"
 					@click={{_handleSearchIconPress}}
+					aria-label="{{_searchText}}"
+					._buttonAccInfo="{{accInfo.search}}"
 				></ui5-button>
 			{{/if}}
 
@@ -91,6 +111,8 @@
 				data-ui5-text="Notifications"
 				data-ui5-notification-count="{{notificationCount}}"
 				@click={{_handleNotificationsPress}}
+				aria-label="{{_notificationsText}}"
+				._buttonAccInfo="{{accInfo.notifications}}"
 			></ui5-button>
 			{{/if}}
 
@@ -100,6 +122,8 @@
 				class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
 				icon="sap-icon://overflow"
 				@click="{{_handleOverflowPress}}"
+				aria-label="{{_overflowText}}"
+				._buttonAccInfo="{{accInfo.overflow}}"
 			></ui5-button>
 
 			{{#if hasProfile}}
@@ -108,6 +132,8 @@
 					id="{{this._id}}-item-3"
 					@click={{_handleProfilePress}}
 					style="{{styles.items.profile}}"
+					aria-label="{{_profileText}}"
+					._buttonAccInfo="{{accInfo.profile}}"
 					class="ui5-shellbar-button ui5-shellbar-image-button">
 						<slot
 							name="profile"
@@ -123,14 +149,16 @@
 				icon="sap-icon://grid"
 				data-ui5-text="Product Switch"
 				@click={{_handleProductSwitchPress}}
+				aria-label="{{_productsText}}"
+				._buttonAccInfo="{{accInfo.products}}"
 			></ui5-button>
 			{{/if}}
 		</div>
 	</div>
 </div>
 
 {{#*inline "coPilot"}}
-	<svg @click="{{_coPilotClick}}" focusable="false" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
+	<svg @click="{{_coPilotClick}}" focusable="false" width="44" role="presentation" aria-hidden="true" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
 		<defs>
 			<linearGradient id="f" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#c0d9f2" stop-opacity=".87"/><stop offset="80%" stop-color="#fff" stop-opacity=".87"/></linearGradient>
 			<linearGradient id="e" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#b4d2ff" stop-opacity=".16"/><stop offset="80%" stop-color="#fff" stop-opacity=".16"/></linearGradient>

packages/fiori/src/ShellBar.js

@@ -10,11 +10,23 @@ import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/icons/search.js";
 import "@ui5/webcomponents-icons/dist/icons/bell.js";
 import "@ui5/webcomponents-icons/dist/icons/overflow.js";
 import "@ui5/webcomponents-icons/dist/icons/grid.js";
 
+import {
+	SHELLBAR_LABEL,
+	SHELLBAR_LOGO,
+	SHELLBAR_COPILOT,
+	SHELLBAR_NOTIFICATIONS,
+	SHELLBAR_PROFILE,
+	SHELLBAR_PRODUCTS,
+	SHELLBAR_SEARCH,
+	SHELLBAR_OVERFLOW,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Templates
 import ShellBarTemplate from "./generated/templates/ShellBarTemplate.lit.js";
 import ShellBarPopoverTemplate from "./generated/templates/ShellBarPopoverTemplate.lit.js";
@@ -144,6 +156,14 @@ const metadata = {
 			type: String,
 			multiple: true,
 		},
+		_menuPopoverExpanded: {
+			type: Boolean,
+			noAttribute: true,
+		},
+		_overflowPopoverExpanded: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
@@ -389,7 +409,7 @@ class ShellBar extends UI5Element {
 			press: async () => {
 				this._updateClonedMenuItems();
 
-				if (this.menuItems.length) {
+				if (this.hasMenuItems) {
 					this.updateStaticAreaItemContentDensity();
 					const menuPopover = await this._getMenuPopover();
 					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
@@ -406,6 +426,8 @@ class ShellBar extends UI5Element {
 			this.overflowPopover.close();
 			this._overflowActions();
 		};
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_menuItemPress(event) {
@@ -414,12 +436,45 @@ class ShellBar extends UI5Element {
 		}, true);
 	}
 
-	_logoPress(event) {
+	_logoPress() {
 		this.fireEvent("logoClick", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-logo"),
 		});
 	}
 
+	_menuPopoverBeforeOpen() {
+		this._menuPopoverExpanded = true;
+	}
+
+	_menuPopoverAfterClose() {
+		this._menuPopoverExpanded = false;
+	}
+
+	_overflowPopoverBeforeOpen() {
+		this._overflowPopoverExpanded = true;
+	}
+
+	_overflowPopoverAfterClose() {
+		this._overflowPopoverExpanded = false;
+	}
+
+	_logoKeyup(event) {
+		if (isSpace(event)) {
+			this._logoPress();
+		}
+	}
+
+	_logoKeydown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+			return;
+		}
+
+		if (isEnter(event)) {
+			this._logoPress();
+		}
+	}
+
 	_fireCoPilotClick() {
 		this.fireEvent("coPilotClick", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
@@ -792,7 +847,7 @@ class ShellBar extends UI5Element {
 				"ui5-shellbar-with-searchfield": this.searchField.length,
 			},
 			button: {
-				"ui5-shellbar-menu-button--interactive": !!this.menuItems.length,
+				"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
 				"ui5-shellbar-menu-button": true,
 			},
 			items: {
@@ -840,11 +895,19 @@ class ShellBar extends UI5Element {
 	}
 
 	get interactiveLogo() {
-		return this.breakpointSize === "S";
+		return this.breakpointSize === "S" && this.hasMenuItems;
+	}
+
+	get hasNonInteractiveLogo() {
+		return this.logo && !this.interactiveLogo;
+	}
+
+	get hasInteractiveLogo() {
+		return this.logo && this.interactiveLogo;
 	}
 
 	get showArrowDown() {
-		return this.primaryTitle || (this.logo && this.interactiveLogo);
+		return this.primaryTitle || this.hasInteractvieLogo;
 	}
 
 	get popoverHorizontalAlign() {
@@ -863,12 +926,80 @@ class ShellBar extends UI5Element {
 		return !!this.profile.length;
 	}
 
+	get hasMenuItems() {
+		return this.menuItems.length > 0;
+	}
+
+	get menuBtnHasPopup() {
+		return this.hasMenuItems ? true : undefined;
+	}
+
 	get menuBtnTabindex() {
-		return this.menuItems.length > 0 ? "0" : "-1";
+		return this.hasMenuItems ? "0" : "-1";
+	}
+
+	get menuPopoverExpanded() {
+		return this.hasMenuItems ? this._menuPopoverExpanded : undefined;
+	}
+
+	get _shellbarText() {
+		return this.i18nBundle.getText(SHELLBAR_LABEL);
+	}
+
+	get _logoText() {
+		return this.i18nBundle.getText(SHELLBAR_LOGO);
+	}
+
+	get _copilotText() {
+		return this.i18nBundle.getText(SHELLBAR_COPILOT);
+	}
+
+	get _notificationsText() {
+		return this.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationCount);
+	}
+
+	get _profileText() {
+		return this.i18nBundle.getText(SHELLBAR_PROFILE);
+	}
+
+	get _productsText() {
+		return this.i18nBundle.getText(SHELLBAR_PRODUCTS);
+	}
+
+	get _searchText() {
+		return this.i18nBundle.getText(SHELLBAR_SEARCH);
+	}
+
+	get _overflowText() {
+		return this.i18nBundle.getText(SHELLBAR_OVERFLOW);
+	}
+
+	get accInfo() {
+		return {
+			notifications: {
+				"title": this._notificationsText,
+			},
+			profile: {
+				"title": this._profileText,
+			},
+			products: {
+				"title": this._productsText,
+			},
+			search: {
+				"ariaExpanded": this.showSearchField,
+				"title": this._searchText,
+			},
+			overflow: {
+				"title": this._overflowText,
+				"ariaHaspopup": true,
+				"ariaExpanded": this._overflowPopoverExpanded,
+			},
+		};
 	}
 
 	static async onDefine() {
 		await Promise.all([
+			fetchI18nBundle("@ui5/webcomponents-fiori"),
 			Button.define(),
 			List.define(),
 			Popover.define(),

packages/fiori/src/ShellBarPopover.hbs

@@ -1,12 +1,22 @@
-<ui5-popover class="ui5-shellbar-menu-popover" placement-type="Bottom">
+<ui5-popover class="ui5-shellbar-menu-popover"
+	placement-type="Bottom"
+	@ui5-beforeOpen={{_menuPopoverBeforeOpen}}
+	@ui5-afterClose={{_menuPopoverAfterClose}}
+>
 	<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{_menuItemPress}}>
 		{{#each _menuPopoverItems}}
 			{{ this }}
 		{{/each}}
 	</ui5-list>
 </ui5-popover>
 
-<ui5-popover class="ui5-shellbar-overflow-popover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" no-arrow>
+<ui5-popover class="ui5-shellbar-overflow-popover"
+	placement-type="Bottom"
+	horizontal-align="{{popoverHorizontalAlign}}"
+	no-arrow
+	@ui5-beforeOpen={{_overflowPopoverBeforeOpen}}
+	@ui5-afterClose={{_overflowPopoverAfterClose}}
+>
 	<ui5-list separators="None" @ui5-itemPress="{{_actionList.itemPress}}">
 		{{#each _hiddenIcons}}
 			<ui5-li

packages/fiori/src/i18n/messagebundle.properties

@@ -32,4 +32,28 @@ UPLOADCOLLECTION_NO_DATA_DESCRIPTION=Drop files to upload, or use the Upload but
 UPLOADCOLLECTION_DRAG_FILE_INDICATOR=Drag files here
 
 #XMSG: Message text indicating where to drop file and upload
-UPLOADCOLLECTION_DROP_FILE_INDICATOR=Drop files to upload
+UPLOADCOLLECTION_DROP_FILE_INDICATOR=Drop files to upload
+
+#XACT: ARIA announcement for the logo button
+SHELLBAR_LABEL = Logo
+
+#XACT: ARIA announcement for the logo button
+SHELLBAR_LOGO = Logo
+
+#XACT: ARIA announcement for the CoPilot button
+SHELLBAR_COPILOT = CoPilot
+
+#XACT: ARIA announcement for the nofications button
+SHELLBAR_NOTIFICATIONS = {0} Notications
+
+#XACT: ARIA announcement for the profile button
+SHELLBAR_PROFILE = Profile
+
+#XACT: ARIA announcement for the products button
+SHELLBAR_PRODUCTS = Products
+
+#XACT: ARIA announcement for the search button
+SHELLBAR_SEARCH = Search
+
+#XACT: ARIA announcement for the more button
+SHELLBAR_OVERFLOW = More