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}