diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx
index ae9197edbed4..273b523ca49c 100644
--- a/packages/main/cypress/specs/MultiComboBox.cy.tsx
+++ b/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(
+
+
+
+
+ );
+
+ 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", () => {
diff --git a/packages/main/src/MultiComboBoxItem.ts b/packages/main/src/MultiComboBoxItem.ts
index 7bd3945f2b03..74539f239256 100644
--- a/packages/main/src/MultiComboBoxItem.ts
+++ b/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 });
diff --git a/packages/main/src/MultiComboBoxItemTemplate.tsx b/packages/main/src/MultiComboBoxItemTemplate.tsx
index 82fd64db9973..cb8d1e7afd7f 100644
--- a/packages/main/src/MultiComboBoxItemTemplate.tsx
+++ b/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 (
<>
+ {this._selectionStateText}