feat(ui5-shellbar): implement accessibility spec

packages/fiori/src/ShellBar.hbs

@@ -8,14 +8,27 @@
 				<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}}"
+				aria-label="Logo"
+				title="Logo"
+				@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 +48,8 @@
 		{{#if showCoPilot}}
 			<div class="ui5-shellbar-copilot-wrapper"
 				tabindex="0"
+				aria-label="CoPilot"
+				title="CoPilot"
 				@keydown="{{_coPilotKeydown}}"
 				@keyup="{{_coPilotKeyup}}"
 				?active="{{coPilotActive}}">
@@ -66,6 +81,8 @@
 					data-ui5-text="Search"
 					data-ui5-notification-count="{{notificationCount}}"
 					@click={{_handleSearchIconPress}}
+					aria-label="Search"
+					._buttonAccInfo="{{accInfo.search}}"
 				></ui5-button>
 			{{/if}}
 
@@ -91,6 +108,8 @@
 				data-ui5-text="Notifications"
 				data-ui5-notification-count="{{notificationCount}}"
 				@click={{_handleNotificationsPress}}
+				aria-label="{{notificationCount}} Notifications"
+				._buttonAccInfo="{{accInfo.notifications}}"
 			></ui5-button>
 			{{/if}}
 
@@ -100,6 +119,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="More"
+				._buttonAccInfo="{{accInfo.overflow}}"
 			></ui5-button>
 
 			{{#if hasProfile}}
@@ -108,6 +129,8 @@
 					id="{{this._id}}-item-3"
 					@click={{_handleProfilePress}}
 					style="{{styles.items.profile}}"
+					aria-label="Profile"
+					._buttonAccInfo="{{accInfo.profile}}"
 					class="ui5-shellbar-button ui5-shellbar-image-button">
 						<slot
 							name="profile"
@@ -123,14 +146,16 @@
 				icon="sap-icon://grid"
 				data-ui5-text="Product Switch"
 				@click={{_handleProductSwitchPress}}
+				aria-label="Products"
+				._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

@@ -144,6 +144,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 +397,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"));
@@ -414,12 +422,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 +833,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 +881,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,8 +912,43 @@ 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 accInfo() {
+		return {
+			notifications: {
+				"title": `${this.notificationCount} Notications`,
+			},
+			profile: {
+				"title": "Profile",
+			},
+			products: {
+				"title": "Products",
+			},
+			search: {
+				"ariaExpanded": this.showSearchField,
+				"title": "Search",
+			},
+			overflow: {
+				"title": "More",
+				"ariaHaspopup": true,
+				"ariaExpanded": this._overflowPopoverExpanded,
+			},
+		};
 	}
 
 	static async onDefine() {

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/themes/ShellBar.css

@@ -197,10 +197,6 @@ slot[name="profile"] {
 	height: 1.675rem;
 }
 
-.ui5-shellbar-logo:not([src]) {
-	display: none;
-}
-
 .ui5-shellbar-button {
 	width: 2.5rem;
 }
@@ -281,7 +277,8 @@ slot[name="profile"] {
 	display: none;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button-title {
+:host([breakpoint-size="S"]) .ui5-shellbar-logo + .ui5-shellbar-menu-button-title,
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button + .ui5-shellbar-menu-button-title {
 	display: none;
 }
 
@@ -372,6 +369,7 @@ ui5-icon[data-count]::before {
 	background: var(--sapShell_Hover_Background);
 }
 
+.ui5-shellbar-logo:focus,
 ::slotted(ui5-input[focused]) {
 	outline: 1px dotted var(--sapContent_ContrastFocusColor);
 }

packages/main/src/Button.hbs

@@ -15,6 +15,7 @@
 		tabindex={{tabIndexValue}}
 		aria-expanded="{{accInfo.ariaExpanded}}"
 		aria-controls="{{accInfo.ariaControls}}"
+		aria-haspopup="{{accInfo.ariaHaspopup}}"
 		aria-label="{{ariaLabelText}}"
 		title="{{accInfo.title}}"
 		part="button"

packages/main/src/Button.js

@@ -164,6 +164,9 @@ const metadata = {
 		_iconSettings: {
 			type: Object,
 		},
+		_buttonAccInfo: {
+			type: Object,
+		},
 
 		/**
 		 * Defines the tabIndex of the component.
@@ -336,6 +339,7 @@ class Button extends UI5Element {
 		return {
 			"ariaExpanded": this._buttonAccInfo && this._buttonAccInfo.ariaExpanded,
 			"ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls,
+			"ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
 			"title": this._buttonAccInfo && this._buttonAccInfo.title,
 		};
 	}