fix(ui5-multi-combobox): announce suggestions selected state

packages/main/cypress/specs/MultiComboBox.cy.tsx

@@ -3247,6 +3247,31 @@ describe("Accessibility", () => {
 			.find(".ui5-checkbox-root")
 			.should("not.have.attr", "tabindex");
 	});
+
+	it("Should announce selected state to screen readers", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem selected={true} text="Selected Item"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Unselected Item"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("[ui5-multi-combobox]")
+			.as("mcb")
+			.realClick();
+
+		cy.get("[ui5-mcb-item]")
+			.eq(0)
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("contain.text", "Selected");
+
+		cy.get("[ui5-mcb-item]")
+			.eq(1)
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("contain.text", "Not Selected");
+	});
 });
 
 describe("Grouping", () => {

packages/main/src/MultiComboBoxItem.ts

@@ -10,6 +10,8 @@ import CheckBox from "./CheckBox.js";
 import type { IMultiComboBoxItem } from "./MultiComboBox.js";
 import {
 	ARIA_LABEL_LIST_ITEM_CHECKBOX,
+	LIST_ITEM_SELECTED,
+	LIST_ITEM_NOT_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 import styles from "./generated/themes/MultiComboBoxItem.css.js";
@@ -79,6 +81,13 @@ class MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {
 		return true;
 	}
 
+	get _selectionStateText(): string {
+		const stateText = this.selected
+			? MultiComboBoxItem.i18nBundle.getText(LIST_ITEM_SELECTED)
+			: MultiComboBoxItem.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		return `${stateText},`;
+	}
+
 	_onclick(e: MouseEvent) {
 		if ((e.target as HTMLElement)?.hasAttribute("ui5-checkbox")) {
 			return this.fireDecoratorEvent("selection-requested", { item: this, selected: (e.target as CheckBox).checked, selectionComponentPressed: true });

packages/main/src/MultiComboBoxItemTemplate.tsx

@@ -3,12 +3,15 @@ import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
 import type MultiComboBoxItem from "./MultiComboBoxItem.js";
 
 export default function MultiComboBoxItemTemplate(this: MultiComboBoxItem) {
-	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+	return ListItemBaseTemplate.call(this, { listItemContent }, {
+		role: "option",
+	});
 }
 
 function listItemContent(this: MultiComboBoxItem) {
 	return (
 		<>
+			<span class="ui5-hidden-text">{this._selectionStateText}</span>
 			<CheckBox
 				disabled={this._readonly}
 				checked={this.selected}

packages/main/src/themes/MultiComboBoxItem.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host([ui5-mcb-item]) {
 	height: auto;
 	min-height: var(--_ui5_list_item_base_height);