fix(ui5-list): improved acc description when groups are available

Improved ACC description for list when we have groups.

Depending on the list role, the description differs.

packages/main/src/List.ts

@@ -44,7 +44,7 @@ import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
-import type ListAccessibleRole from "./types/ListAccessibleRole.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import type ListItemBase from "./ListItemBase.js";
 import type {
 	ListItemBasePressEventDetail,
@@ -64,6 +64,8 @@ import listCss from "./generated/themes/List.css.js";
 
 // Texts
 import {
+	LIST_ROLE_LIST_GROUP_DESCRIPTION,
+	LIST_ROLE_LISTBOX_GROUP_DESCRIPTION,
 	LOAD_MORE_TEXT, ARIA_LABEL_LIST_SELECTABLE,
 	ARIA_LABEL_LIST_MULTISELECTABLE,
 	ARIA_LABEL_LIST_DELETABLE,
@@ -490,6 +492,8 @@ class List extends UI5Element {
 	_handleResize: ResizeObserverCallback;
 	initialIntersection: boolean;
 	_selectionRequested?: boolean;
+	_groupCount: number;
+	_groupItemCount: number;
 	growingIntersectionObserver?: IntersectionObserver | null;
 	_itemNavigation: ItemNavigation;
 	_beforeElement?: HTMLElement | null;
@@ -527,6 +531,8 @@ class List extends UI5Element {
 		// Indicates the List bottom most part has been detected by the IntersectionObserver
 		// for the first time.
 		this.initialIntersection = true;
+		this._groupCount = 0;
+		this._groupItemCount = 0;
 
 		this.onItemFocusedBound = this.onItemFocused.bind(this);
 		this.onForwardAfterBound = this.onForwardAfter.bind(this);
@@ -681,7 +687,21 @@ class List extends UI5Element {
 	}
 
 	get ariaDescriptionText() {
-		return this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this);
+		return this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this) || this._getDescriptionForGroups();
+	}
+
+	_getDescriptionForGroups(): string {
+		let description = "";
+
+		if (this._groupCount > 0) {
+			if (this.accessibleRole === ListAccessibleRole.List) {
+				description = List.i18nBundle.getText(LIST_ROLE_LIST_GROUP_DESCRIPTION, this._groupCount, this._groupItemCount);
+			} else if (this.accessibleRole === ListAccessibleRole.ListBox) {
+				description = List.i18nBundle.getText(LIST_ROLE_LISTBOX_GROUP_DESCRIPTION, this._groupCount);
+			}
+		}
+
+		return description;
 	}
 
 	get ariaLabelModeText(): string {
@@ -846,16 +866,24 @@ class List extends UI5Element {
 		// drill down when we see ui5-li-group and get the items
 		const items: ListItemBase[] = [];
 		const slottedItems = this.getSlottedNodes<ListItemBase>("items");
+		let groupCount = 0;
+		let groupItemCount = 0;
 
 		slottedItems.forEach(item => {
 			if (isInstanceOfListItemGroup(item)) {
 				const groupItems = [item.groupHeaderItem, ...item.items.filter(listItem => listItem.assignedSlot)].filter(Boolean);
 				items.push(...groupItems);
+				groupCount++;
+				// subtract group itself for proper group header item count
+				groupItemCount += groupItems.length - 1;
 			} else {
 				item.assignedSlot && items.push(item);
 			}
 		});
 
+		this._groupCount = groupCount;
+		this._groupItemCount = groupItemCount;
+
 		return items;
 	}
 

packages/main/src/ListItemGroupHeaderTemplate.tsx

@@ -3,7 +3,7 @@ import type ListItemGroupHeader from "./ListItemGroupHeader.js";
 export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 	return (
 		<ul
-			role="group"
+			role="listitem"
 			part="native-li"
 			tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}
 			class={{

packages/main/src/i18n/messagebundle.properties

@@ -246,6 +246,12 @@ LIST_ITEM_NOT_SELECTED=Not Selected
 #XACT: ARIA announcement for the list item selected=false state
 LIST_ITEM_GROUP_HEADER=Group Header
 
+#XACT: ARIA Annoucement for grouping with role=list
+LIST_ROLE_LIST_GROUP_DESCRIPTION=contains {0} sub groups with {1} items
+
+#XACT: ARIA Annoucement for grouping with role=listbox
+LIST_ROLE_LISTBOX_GROUP_DESCRIPTION=contains {0} sub groups
+
 #XBUT: List Multi Selection Mode Checkbox aria-label text
 ARIA_LABEL_LIST_ITEM_CHECKBOX = Multiple Selection mode.