fix(ui5-shellbar): fix searchbar beharviour

PetyaMarkovaBogdanova · Dec 10, 2024 · 393d1fa · 393d1fa
2 parents e81ab05 + 7667585
commit 393d1fa
Show file tree

Hide file tree

Showing 32 changed files with 1,081 additions and 39 deletions.
diff --git a/packages/fiori/cypress/specs/ShellBar.cy.ts b/packages/fiori/cypress/specs/ShellBar.cy.ts
@@ -1,7 +1,10 @@
 import { html } from "lit";
 import "../../src/ShellBar.js";
 import "@ui5/webcomponents-icons/dist/activities.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";
 import "@ui5/webcomponents-icons/dist/da.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
+import "@ui5/webcomponents/dist/ToggleButton.js";
 
 describe("Responsiveness", () => {
 	const basicTemplate = html`
@@ -25,14 +28,14 @@ describe("Responsiveness", () => {
 		<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
 
 		<ui5-shellbar-item id="disc" icon="activities" text="Disconnect"></ui5-shellbar-item>
-		<ui5-shellbar-item id="call" icon="sys-type" text="Incoming Calls"></ui5-shellbar-item>
+		<ui5-shellbar-item id="call" icon="sys-help" text="Incoming Calls"></ui5-shellbar-item>
 
 		<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
 			<div slot="valueStateMessage">Instructions</div>
 		</ui5-input>
 
 		<ui5-switch design="Textual" text-on="PR0" text-off="PR0" slot="startContent"></ui5-switch>
-		<ui5-toggle-button  slot="endContent" text="PR2" data-priority="2">PR2</ui5-toggle-button>
+		<ui5-toggle-button slot="endContent" text="PR2" data-priority="2">PR2</ui5-toggle-button>
 	</ui5-shellbar>`;
 
 	const templateWithMenuItems = html`
@@ -60,17 +63,11 @@ describe("Responsiveness", () => {
 		<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
 
 		<ui5-shellbar-item id="disc" icon="activities" text="Disconnect"></ui5-shellbar-item>
-		<ui5-shellbar-item id="call" icon="sys-type" text="Incoming Calls"></ui5-shellbar-item>
+		<ui5-shellbar-item id="call" icon="sys-help" text="Incoming Calls"></ui5-shellbar-item>
 
 		<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
 			<div slot="valueStateMessage">Instructions</div>
 		</ui5-input>
-
-		<ui5-li id="menu-item-1" slot="menuItems" data-key="key1">Application 1</ui5-li>
-		<ui5-li id="menu-item-2" slot="menuItems" data-key="key2">Application 2</ui5-li>
-		<ui5-li slot="menuItems" data-key="key3">Application 3</ui5-li>
-		<ui5-li slot="menuItems" data-key="key4">Application 4</ui5-li>
-		<ui5-li slot="menuItems" data-key="key5">Application 5</ui5-li>
 	</ui5-shellbar>`;
 
 	const templateWithOnlyOneAction = html`<ui5-shellbar
@@ -135,13 +132,18 @@ describe("Responsiveness", () => {
 				.find(".ui5-shellbar-button-product-switch")
 				.as("productSwitchIcon");
 
+			cy.get("@shellbar")
+				.find("ui5-toggle-button[slot='assistant']")
+				.as("assistant");
+
 			cy.get("@backButton").should("be.visible");
 			cy.get("@primaryTitle").should("be.visible");
 			cy.get("@secondaryTitle").should("be.visible");
 			cy.get("@customActionIcon1").should("be.visible");
 			cy.get("@notificationsIcon").should("be.visible");
 			cy.get("@profileIcon").should("be.visible");
 			cy.get("@productSwitchIcon").should("be.visible");
+			cy.get("@assistant").should("be.visible");
 
 			cy.get("@searchButton").click();
 

diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
@@ -5,7 +5,6 @@
 			id="{{_id}}-header"
 			aria-label="{{_headerLabel}}"
 			aria-expanded="{{_headerExpanded}}"
-			role="region"
 			@ui5-_toggle-title={{onToggleTitle}}
 		>
 			<slot name="titleArea"></slot>
@@ -17,7 +16,7 @@
 				{{> header-actions}}
 			{{/if}}
 		</header>
-		
+
 		{{#if headerInContent}}
 			<slot tabindex="{{headerTabIndex}}" ?aria-hidden="{{headerAriaHidden}}" name="headerArea"></slot>
 		{{/if}}

diff --git a/packages/fiori/src/DynamicPageHeader.hbs b/packages/fiori/src/DynamicPageHeader.hbs
@@ -1,3 +1,3 @@
-<div class="ui5-dynamic-page-header-root">
+<div class="ui5-dynamic-page-header-root" role="region">
     <slot></slot>
 </div>
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -258,13 +258,7 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"];
  * @param {Array<HTMLElement>} array of all the items that disappeared from additional context slot
  * @public
  */
-@event<ShellBarAdditionalContextItemDisappearsEventDetail>("additional-context-disappears", {
-	detail: {
-		/**
-		 * @public
-		 */
-		items: { type: Array<HTMLElement | null> },
-	},
+@event("additional-context-disappears", {
 	bubbles: true,
 	cancelable: true,
 })
@@ -277,6 +271,7 @@ class ShellBar extends UI5Element {
 		"logo-click": ShellBarLogoClickEventDetail,
 		"menu-item-click": ShellBarMenuItemClickEventDetail,
 		"search-button-click": ShellBarSearchButtonEventDetail,
+		"additional-context-disappears": ShellBarAdditionalContextItemDisappearsEventDetail,
 	}
 	/**
 	 * Defines the `primaryTitle`.
@@ -517,6 +512,7 @@ class ShellBar extends UI5Element {
 	_skipLayout = false;
 	_lastOffsetWidth = 0;
 	_lessSearchSpace = false;
+	_searchButtonInteraction = false;
 
 	_headerPress: () => void;
 
@@ -573,6 +569,10 @@ class ShellBar extends UI5Element {
 			if (this._lastOffsetWidth !== this.offsetWidth) {
 				this._overflowActions();
 				this._searchBarInitialState();
+				if (this._searchButtonInteraction && this._showSearchField)	{
+					this._showSearchField = false;
+					this._searchButtonInteraction = false;
+				}
 			}
 		}, RESIZE_THROTTLE_RATE);
 	}
@@ -872,7 +872,7 @@ class ShellBar extends UI5Element {
 	_handleActionsOverflow() {
 		const itemsToOverflow = this.itemsToOverflow;
 		const container = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-overflow-container-right")!;
-		const searchFieldWidth = this.searchField[0].offsetWidth;
+		const searchFieldWidth = this.searchField[0] ? this.searchField[0].offsetWidth : 0;
 		const nonDisappearingItems = Array.from(container.querySelectorAll<HTMLElement>(".ui5-shellbar-no-overflow-button"));
 		const nonDisappearingItemsWidth = nonDisappearingItems.reduce((acc, el) => acc + el.offsetWidth + this.domCalculatedValues("--_ui5-shellbar-overflow-button-margin"), 0);
 		const totalWidth = container.offsetWidth - nonDisappearingItemsWidth - this.separatorsWidth - searchFieldWidth;
@@ -920,7 +920,7 @@ class ShellBar extends UI5Element {
 		this._hideAdditionalContext();
 
 		if (this.additionalCoontextHidden && JSON.stringify(this.additionalCoontextHidden) !== JSON.stringify(this._cachedHiddenContent)) {
-			this.fireDecoratorEvent<ShellBarAdditionalContextItemDisappearsEventDetail>("additional-context-disappears", { items: this.additionalCoontextHidden });
+			this.fireDecoratorEvent("additional-context-disappears", { items: this.additionalCoontextHidden });
 		}
 
 		this._cachedHiddenContent = this.additionalCoontextHidden;
@@ -995,6 +995,7 @@ class ShellBar extends UI5Element {
 				input.focus();
 			}
 		}, 100);
+		this._searchButtonInteraction = true;
 	}
 
 	async _handleActionListClick() {
@@ -1044,6 +1045,7 @@ class ShellBar extends UI5Element {
 
 	_handleCancelButtonPress() {
 		this._showSearchField = false;
+		this._searchButtonInteraction = false;
 	}
 
 	_handleProductSwitchPress(e: MouseEvent) {

diff --git a/packages/fiori/test/specs/DynamicPage.spec.js b/packages/fiori/test/specs/DynamicPage.spec.js
@@ -406,6 +406,7 @@ describe("ARIA attributes", () => {
         const title = await browser.$("#page ui5-dynamic-page-title");
         const titleFocusArea = await title.shadow$(".ui5-dynamic-page-title-focus-area");
         const headerWrapper = await page.shadow$(".ui5-dynamic-page-title-header-wrapper");
+        const headerRoot = await page.$("ui5-dynamic-page-header").shadow$(".ui5-dynamic-page-header-root");
         const headerActions = await page.shadow$("ui5-dynamic-page-header-actions");
         const expandButton = await headerActions.shadow$("ui5-button.ui5-dynamic-page-header-action-expand");
         const pinButton = await headerActions.shadow$("ui5-toggle-button.ui5-dynamic-page-header-action-pin");
@@ -418,7 +419,7 @@ describe("ARIA attributes", () => {
             "aria-label value is correct");
         assert.strictEqual(await headerWrapper.getAttribute("aria-expanded"), "true",
             "aria-expanded value is correct");
-        assert.strictEqual(await headerWrapper.getAttribute("role"), "region",
+        assert.strictEqual(await headerRoot.getAttribute("role"), "region",
             "header role is correct");
 
         assert.strictEqual(await titleFocusArea.getAttribute("aria-expanded"), "true",
@@ -453,8 +454,6 @@ describe("ARIA attributes", () => {
             "aria-label value is correct");
         assert.strictEqual(await headerWrapper.getAttribute("aria-expanded"), "false",
             "aria-expanded value is correct");
-        assert.strictEqual(await headerWrapper.getAttribute("role"), "region",
-            "role is correct");
 
         assert.strictEqual(await titleFocusArea.getAttribute("aria-expanded"), "false",
             "aria-expanded value is correct");