fix(ui5-shellbar): enable items keyboard handling (#1473)

All ui5-icon elements now become ui5-button, the ui5-button has tabindex=0 and also can be triggered with SPACE and ENTER. To ensure the correct tab order, the layout of the items is changed in such way that their DOM order is the same as their display order.
SAP · Apr 14, 2020 · 185851a · 185851a
1 parent 27435ee
commit 185851a
Show file tree

Hide file tree

Showing 4 changed files with 250 additions and 175 deletions.
diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
@@ -1,7 +1,6 @@
 <div
 	class="{{classes.wrapper}}"
 	dir="{{rtl}}"
-	@keydown={{_onkeydown}}
 >
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
 
@@ -14,7 +13,7 @@
 		{{/unless}}
 
 		{{#if showArrowDown}}
-			<button tabindex="0" class="{{classes.button}}" @click="{{_header.press}}">
+			<button tabindex="{{menuBtnTabindex}}" class="{{classes.button}}" @click="{{_header.press}}">
 				{{#if interactiveLogo}}
 					<img class="ui5-shellbar-logo" src="{{logo}}" @click="{{_logoPress}}" />
 				{{/if}}
@@ -34,42 +33,18 @@
 
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
 		{{#if showCoPilot}}
-			{{> coPilot}}
+			<div class="ui5-shellbar-copilot-wrapper"
+				tabindex="0"
+				@keydown="{{_coPilotKeydown}}"
+				@keyup="{{_coPilotKeyup}}"
+				?active="{{coPilotActive}}">
+				{{> coPilot}}
+			</div>
 		{{else}}
 			<span class="ui5-shellbar-co-pilot-placeholder"></span>
 		{{/if}}
 	</div>
 
-	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
-
-		<div class="ui5-shellbar-overflow-container-right-child">
-			{{#each _itemsInfo}}
-				{{#if this.icon}}
-					<ui5-icon
-						tabindex="{{this._tabIndex}}"
-						data-count="{{this.count}}"
-						data-ui5-notification-count="{{../notificationCount}}"
-						data-ui5-external-action-item-id="{{this.refItemid}}"
-						class="{{this.classes}}"
-						name="{{this.icon}}"
-						id="{{this.id}}"
-						style="{{this.style}}"
-						@click={{this.press}}>
-					</ui5-icon>
-				{{else}}
-					<slot
-						name="profile"
-						id="{{this.id}}"
-						style="{{this.style}}"
-						class="{{this.classes}}"
-						tabindex="{{this._tabIndex}}"
-						@click={{this.press}}
-					></slot>
-				{{/if}}
-			{{/each}}
-		</div>
-	</div>
-
 	<div id="{{_id}}-searchfield-wrapper"
 		class="ui5-shellbar-search-field"
 		style="{{styles.searchField}}"
@@ -78,10 +53,84 @@
 			<slot name="searchField"></slot>
 		{{/if}}
 	</div>
+
+	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
+
+		<div class="ui5-shellbar-overflow-container-right-child">
+
+			{{#if hasSearchField}}
+				<ui5-button
+					id="{{this._id}}-item-1"
+					class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"
+					icon="sap-icon://search"
+					data-ui5-text="Search"
+					data-ui5-notification-count="{{notificationCount}}"
+					@click={{_handleSearchIconPress}}
+				></ui5-button>
+			{{/if}}
+
+			{{#each customItemsInfo}}
+				<ui5-button
+					id="{{this.id}}"
+					style="{{this.style}}"
+					class="{{this.classes}}"
+					icon="{{this.icon}}"
+					data-count="{{this.count}}"
+					data-ui5-notification-count="{{../notificationCount}}"
+					data-ui5-external-action-item-id="{{this.refItemid}}"
+					@click={{this.press}}
+				></ui5-button>
+			{{/each}}
+
+			{{#if showNotifications}}
+			<ui5-button
+				id="{{this._id}}-item-2"
+				style="{{styles.items.notification}}"
+				class="{{classes.items.notification}} ui5-shellbar-button ui5-shellbar-bell-button"
+				icon="sap-icon://bell"
+				data-ui5-text="Notifications"
+				data-ui5-notification-count="{{notificationCount}}"
+				@click={{_handleNotificationsPress}}
+			></ui5-button>
+			{{/if}}
+
+			<ui5-button
+				id="{{this._id}}-item-5"
+				style="{{styles.items.overflow}}"
+				class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
+				icon="sap-icon://overflow"
+				@click="{{_handleOverflowPress}}"
+			></ui5-button>
+
+			{{#if hasProfile}}
+				<ui5-button
+					profile-btn
+					id="{{this._id}}-item-3"
+					@click={{_handleProfilePress}}
+					style="{{styles.items.profile}}"
+					class="ui5-shellbar-button ui5-shellbar-image-button">
+						<slot
+							name="profile"
+						></slot>
+				</ui5-button>
+			{{/if}}
+
+			{{#if showProductSwitch}}
+			<ui5-button
+				id="{{this._id}}-item-4"
+				style="{{styles.items.product}}"
+				class="{{classes.items.product}} ui5-shellbar-button ui5-shellbar-button-product-switch"
+				icon="sap-icon://grid"
+				data-ui5-text="Product Switch"
+				@click={{_handleProductSwitchPress}}
+			></ui5-button>
+			{{/if}}
+		</div>
+	</div>
 </div>
 
 {{#*inline "coPilot"}}
-	<svg @click="{{_coPilotPress}}" 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" 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>