fix(ui5-li-groupheader): change role option (#3869)

SAP · Sep 9, 2021 · b6219c7 · b6219c7
1 parent d73bba1
commit b6219c7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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");
+	});
 });