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

@@ -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>
+<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>

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.
 	*

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);
+	});
+});