From fabe25763e6cdcaaf3744ab80269817fb40449b3 Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Fri, 17 May 2024 12:53:57 +0300
Subject: [PATCH] refactor(ui5-li-group): forward focused attribute to header
 item (#8978)

fix(ui5-li-group): forward focused attribute to header item

Introduce focused attribute to implement fake focus feature in suggestion items.
---
 packages/main/src/ListItemGroup.hbs           | 24 +++++++-------
 packages/main/src/ListItemGroup.ts            |  7 +++++
 .../main/test/specs/ListItemGroup.spec.js     | 31 +++++++++++++++++++
 3 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 packages/main/test/specs/ListItemGroup.spec.js

diff --git a/packages/main/src/ListItemGroup.hbs b/packages/main/src/ListItemGroup.hbs
index ddc04efa436c..04f3f028b54f 100644
--- a/packages/main/src/ListItemGroup.hbs
+++ b/packages/main/src/ListItemGroup.hbs
@@ -1,12 +1,12 @@
-  <ul class="ui5-group-li-root" role="group">
-    {{#if hasHeader}}
-      <ui5-li-group-header part="header">
-          {{#if hasFormattedHeader}}
-            <slot name="header"></slot>
-          {{else}}
-            {{headerText}}
-          {{/if}}
-      </ui5-li-group-header>
-    {{/if}}
-    <slot></slot>
-  </ul>
\ No newline at end of file
+<ul class="ui5-group-li-root" role="group">
+  {{#if hasHeader}}
+    <ui5-li-group-header ?focused="{{focused}}" part="header">
+        {{#if hasFormattedHeader}}
+          <slot name="header"></slot>
+        {{else}}
+          {{headerText}}
+        {{/if}}
+    </ui5-li-group-header>
+  {{/if}}
+  <slot></slot>
+</ul>
\ No newline at end of file
diff --git a/packages/main/src/ListItemGroup.ts b/packages/main/src/ListItemGroup.ts
index 73522c92aa34..f403b3cae277 100644
--- a/packages/main/src/ListItemGroup.ts
+++ b/packages/main/src/ListItemGroup.ts
@@ -64,6 +64,13 @@ class ListItemGroup extends UI5Element {
 	})
 	items!: Array<ListItemBase>;
 
+	/**
+	 * Indicates whether the header is focused
+	 * @private
+	 */
+	@property({ type: Boolean })
+	focused!: boolean;
+
 	/**
 	* Defines the header of the component.
 	*
diff --git a/packages/main/test/specs/ListItemGroup.spec.js b/packages/main/test/specs/ListItemGroup.spec.js
new file mode 100644
index 000000000000..074dc1efb2ae
--- /dev/null
+++ b/packages/main/test/specs/ListItemGroup.spec.js
@@ -0,0 +1,31 @@
+import { assert } from "chai";
+
+describe("ListItemGroup Tests", () => {
+	before(async () => {
+		await browser.url(`test/pages/List_test_page.html`);
+	});
+
+	it("ListGroup is rendered", async () => {
+		const listItemGroup = await browser.$("#list1 [ui5-li-group]");
+		const listItemGroupHeader = await listItemGroup.shadow$("ui5-li-group-header");
+
+		assert.ok(listItemGroup.isExisting(), true, "ListGroup is rendered");
+		assert.ok(listItemGroupHeader.isExisting(), true, "ListGroup header is rendered");
+	});
+
+	it("ListGroup renders header-text property correctly", async () => {
+		const listItemGroup = await browser.$("#list1 [ui5-li-group]");
+		const listItemGroupHeader = await listItemGroup.shadow$("ui5-li-group-header");
+
+		assert.strictEqual(await listItemGroupHeader.getText(), "New Items", "List's group header is correctly displayed");
+	});
+
+	it("ListGroup propagates focused property to header item", async () => {
+		const listItemGroup = await browser.$("#list1 [ui5-li-group]");
+		const listItemGroupHeader = await listItemGroup.shadow$("ui5-li-group-header");
+
+		await listItemGroup.setProperty("focused", true);
+		assert.strictEqual(await listItemGroupHeader.getProperty("focused"), true, "List's group header is focused");
+		await listItemGroup.setProperty("focused", false);
+	});
+});
\ No newline at end of file