From b6219c7d9f1010f3fede543b4ea81e5789414a22 Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Wed, 8 Sep 2021 15:06:28 +0300
Subject: [PATCH] fix(ui5-li-groupheader): change role option (#3869)

---
 packages/main/src/GroupHeaderListItem.hbs    | 6 +++---
 packages/main/src/GroupHeaderListItem.js     | 4 ++++
 packages/main/test/pages/List_test_page.html | 1 +
 packages/main/test/specs/List.spec.js        | 6 ++++++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/GroupHeaderListItem.hbs b/packages/main/src/GroupHeaderListItem.hbs
index 4080149d3769..64dfecdfc039 100644
--- a/packages/main/src/GroupHeaderListItem.hbs
+++ b/packages/main/src/GroupHeaderListItem.hbs
@@ -4,11 +4,11 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
-	role="option"
+	aria-label="{{ariaLabelText}}"
+	aria-roledescription="{{groupHeaderText}}"
+	role="group"
 	style="list-style-type: none;"
 >
-	<span class="ui5-hidden-text">{{groupHeaderText}} {{accessibleName}}</span>
-
 	<div id="{{_id}}-content" class="ui5-li-content">
 		<span class="ui5-ghli-title"><slot></slot></span>
 	</div>
diff --git a/packages/main/src/GroupHeaderListItem.js b/packages/main/src/GroupHeaderListItem.js
index 2fd2b9ce4424..5f9d700cfaae 100644
--- a/packages/main/src/GroupHeaderListItem.js
+++ b/packages/main/src/GroupHeaderListItem.js
@@ -85,6 +85,10 @@ class GroupHeaderListItem extends ListItemBase {
 		return this.i18nBundle.getText(GROUP_HEADER_TEXT);
 	}
 
+	get ariaLabelText() {
+		return [this.textContent, this.accessibleName].filter(Boolean).join(" ");
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			fetchI18nBundle("@ui5/webcomponents"),
diff --git a/packages/main/test/pages/List_test_page.html b/packages/main/test/pages/List_test_page.html
index 6276d8167582..0acbafff09af 100644
--- a/packages/main/test/pages/List_test_page.html
+++ b/packages/main/test/pages/List_test_page.html
@@ -40,6 +40,7 @@
 
 	<br><br><br>
 	<ui5-list id="listSelectedItem" mode="MultiSelect">
+		<ui5-li-groupheader id="group-header">New Items</ui5-li-groupheader>
 		<ui5-li id="not-selected-country">Argentina</ui5-li>
 		<ui5-li id="selected-country" selected >Bulgaria</ui5-li>
 	</ui5-list>
diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js
index e48037689f56..11b965f57c74 100644
--- a/packages/main/test/specs/List.spec.js
+++ b/packages/main/test/specs/List.spec.js
@@ -369,4 +369,10 @@ describe("List Tests", () => {
 		accInfo = selectedItem.getProperty("_accInfo");
 		assert.strictEqual(accInfo.listItemAriaLabel, "Selected", "Selected text is part of the label");
 	});
+
+	it('group headers should not be with role options', () => {
+		const groupHeader = $("#listSelectedItem #group-header").shadow$(".ui5-ghli-root");
+
+		assert.strictEqual(groupHeader.getAttribute("role"), "group", "Item label is empty");
+	});
 });