feat: support suggestions listbox with option structure

Author: dobrinyonkov

packages/main/src/ListItemGroupHeader.ts

@@ -1,6 +1,8 @@
 import { slot, property, customElement } from "@ui5/webcomponents-base/dist/decorators.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js";
 import ListItemBase from "./ListItemBase.js";
 
 import { GROUP_HEADER_TEXT } from "./generated/i18n/i18n-defaults.js";
@@ -10,6 +12,7 @@ import ListItemGroupHeaderTemplate from "./ListItemGroupHeaderTemplate.js";
 
 // Styles
 import ListItemGroupHeaderCss from "./generated/themes/ListItemGroupHeader.css.js";
+import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
 
 /**
  * @class
@@ -39,12 +42,19 @@ class ListItemGroupHeader extends ListItemBase {
 	@property()
 	accessibleName?: string;
 
+	@property()
+	accessibleRole: `${ListItemAccessibleRole}` = ListItemAccessibleRole.ListItem;
+
 	@slot()
 	subItems!: Array<HTMLElement>;
 
-	@i18n("@ui5/webcomponents")
+	@i18n("@ui5/wezbcomponents")
 	static i18nBundle: I18nBundle;
 
+	get effectiveAccRole(): AriaRole {
+		return toLowercaseEnumValue(this.accessibleRole);
+	}
+
 	get groupItem() {
 		return true;
 	}

packages/main/src/ListItemGroupHeaderTemplate.tsx

@@ -2,8 +2,9 @@ import type ListItemGroupHeader from "./ListItemGroupHeader.js";
 
 export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 	return (
-		<li
+		<div
 			part="native-li"
+			role={this.effectiveAccRole}
 			tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}
 			class={{
 				"ui5-ghli-root": true,
@@ -19,6 +20,6 @@ export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 			</div>
 
 			<slot name="subItems"></slot>
-		</li>
+		</div>
 	);
 }

packages/main/src/ListItemGroupTemplate.tsx

@@ -1,22 +1,30 @@
+import type { AriaRole } from "@ui5/webcomponents-base/";
 import type ListItemGroup from "./ListItemGroup.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
 import DropIndicator from "./DropIndicator.js";
+import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
 
-export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { items: () => void }) {
+export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { items: () => void }, injectedProps?: {
+	groupHeaderRole?: `${ListItemAccessibleRole}`,
+	groupRole?: AriaRole,
+}) {
 	const items = hooks?.items || defaultItems;
+	const groupHeaderRole = injectedProps?.groupHeaderRole || ListItemAccessibleRole.ListItem;
+	const groupRole = injectedProps?.groupRole || "list";
 
 	return (
 		<>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header">
+				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={groupHeaderRole}>
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
 					<div
+						role={groupRole}
 						slot="subItems"
 						aria-owns={`${this._id}-content`}
 					></div>
 				</ListItemGroupHeader>
 			}
-			<ul class="ui5-group-li-root"
+			<div class="ui5-group-li-root"
 				onDragEnter={this._ondragenter}
 				onDragOver={this._ondragover}
 				onDrop={this._ondrop}
@@ -26,7 +34,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { ite
 				{ items.call(this) }
 
 				<DropIndicator orientation="Horizontal" ownerReference={this}/>
-			</ul>
+			</div>
 		</>
 
 	);

packages/main/src/SuggestionItemGroup.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import type SuggestionListItem from "./SuggestionListItem.js";
 import ListItemGroup from "./ListItemGroup.js";
+import SuggestionItemGroupTemplate from "./SuggestionItemGroupTemplate.js";
 
 /**
  * @class
@@ -14,6 +15,7 @@ import ListItemGroup from "./ListItemGroup.js";
  */
 @customElement({
 	tag: "ui5-suggestion-item-group",
+	template: SuggestionItemGroupTemplate,
 })
 class SuggestionItemGroup extends ListItemGroup {
 	/**

packages/main/src/SuggestionItemGroupTemplate.tsx

@@ -1,6 +1,10 @@
 import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
 import type SuggestionItemGroup from "./SuggestionItemGroup.js";
+import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
 
 export default function SuggestionItemGroupTemplate(this: SuggestionItemGroup) {
-	return ListItemGroupTemplate.call(this);
+	return ListItemGroupTemplate.call(this, undefined, {
+		groupHeaderRole: ListItemAccessibleRole.Group,
+		groupRole: "none",
+	 });
 }

packages/main/src/features/InputSuggestionsTemplate.tsx

@@ -6,6 +6,7 @@ import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
+import ListAccessibleRole from "../types/ListAccessibleRole.js";
 
 export default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) {
 	return (
@@ -96,6 +97,7 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 function suggestionsList(this: Input) {
 	return (
 		<List
+			accessibleRole={ListAccessibleRole.ListBox}
 			separators={this.suggestionSeparators}
 			selectionMode="Single"
 			onMouseDown={this.onItemMouseDown}

packages/main/src/types/ListItemAccessibleRole.ts

@@ -5,6 +5,12 @@
  */
 enum ListItemAccessibleRole {
 
+	/**
+	 * Represents the ARIA role "group".
+	 * @private
+	 */
+	Group = "Group",
+
 	/**
 	 * Represents the ARIA role "listitem". (by default)
 	 * @public