fix(ui5-combobox): announce selected item (#3358)

* fix(ui5-combobox): announce selected item

* apply comments

Author: ivoplashkov

packages/main/src/ComboBox.js

@@ -4,6 +4,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -24,6 +25,8 @@ import {
 	VALUE_STATE_INFORMATION,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
+	LIST_ITEM_POSITION,
+	LIST_ITEM_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -589,6 +592,10 @@ class ComboBox extends UI5Element {
 		indexOfItem += isArrowDown ? 1 : -1;
 		indexOfItem = indexOfItem < 0 ? 0 : indexOfItem;
 
+		if (this.responsivePopover.opened) {
+			this.announceSelectedItem(indexOfItem);
+		}
+
 		this._filteredItems[indexOfItem].focused = true;
 		this.filterValue = this._filteredItems[indexOfItem].text;
 		this._isKeyNavigation = true;
@@ -721,6 +728,13 @@ class ComboBox extends UI5Element {
 		this._itemFocused = true;
 	}
 
+	announceSelectedItem(indexOfItem) {
+		const itemPositionText = this.i18nBundle.getText(LIST_ITEM_POSITION, [indexOfItem + 1], [this._filteredItems.length]);
+		const itemSelectionText = this.i18nBundle.getText(LIST_ITEM_SELECTED);
+
+		announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+	}
+
 	get _headerTitleText() {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}

packages/main/test/specs/ComboBox.spec.js

@@ -328,3 +328,27 @@ describe("General interaction", () => {
 		assert.strictEqual(listItem.shadow$(".ui5-li-additional-text").getText(), "DZ", "Additional item text should be displayed");
 	});
 });
+
+describe("Accessibility", () => {
+
+	it ("Announce item on selection", () => {
+		const combo = $("#combo");
+		const arrow = combo.shadow$("[input-icon]");
+		const input = combo.shadow$("#ui5-combobox-input");
+		const invisibleMessageSpan = $(".ui5-invisiblemessage-polite");
+		const itemAnnouncement1 = "List item 1 of 11 Selected";
+		const itemAnnouncement2 = "List item 2 of 11 Selected";
+
+		arrow.click();
+
+		assert.strictEqual(invisibleMessageSpan.getHTML(false), "", "Span value should be empty.")
+
+		input.keys("ArrowDown");
+
+		assert.strictEqual(invisibleMessageSpan.getHTML(false), itemAnnouncement1, "Span value is correct.")
+
+		input.keys("ArrowDown");
+
+		assert.strictEqual(invisibleMessageSpan.getHTML(false), itemAnnouncement2, "Span value is correct.")
+	});
+});