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;"
>
- {{groupHeaderText}} {{accessibleName}}
-
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 @@
+
Argentina
Bulgaria
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");
+ });
});