From 194185400bb70a778359a721928ad3a99bd5f3a6 Mon Sep 17 00:00:00 2001
From: niyap <38278268+niyap@users.noreply.github.com>
Date: Mon, 30 Oct 2023 11:26:18 +0200
Subject: [PATCH] fix(ui5-combobox): announce value state header on focus
 (#7751)

* fix(ui5-combobox): announce value state header on focus

* fix(ui5-combobox): announce default value state text

* fix(ui5-combobox): adjust condition
---
 packages/main/src/ComboBox.ts             | 12 ++++++++++++
 packages/main/test/pages/ComboBox.html    | 13 +++++++++++++
 packages/main/test/specs/ComboBox.spec.js | 18 ++++++++++++++++++
 3 files changed, 43 insertions(+)

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 3e61961d5e5e..0766e275fcb6 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -769,6 +769,7 @@ class ComboBox extends UI5Element {
 
 		if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) {
 			this._isValueStateFocused = true;
+			this._announceValueStateText();
 			this.focused = false;
 			return;
 		}
@@ -792,6 +793,7 @@ class ComboBox extends UI5Element {
 			this._clearFocus();
 			this._itemFocused = false;
 			this._isValueStateFocused = true;
+			this._announceValueStateText();
 			this._filteredItems[0].selected = false;
 			return;
 		}
@@ -815,6 +817,7 @@ class ComboBox extends UI5Element {
 			this._clearFocus();
 			this._itemFocused = false;
 			this._isValueStateFocused = true;
+			this._announceValueStateText();
 			return;
 		}
 
@@ -838,6 +841,7 @@ class ComboBox extends UI5Element {
 			this._clearFocus();
 			this._itemFocused = false;
 			this._isValueStateFocused = true;
+			this._announceValueStateText();
 			return;
 		}
 
@@ -1073,6 +1077,14 @@ class ComboBox extends UI5Element {
 		}
 	}
 
+	_announceValueStateText() {
+		const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessageText.map(el => el.textContent).join(" ");
+
+		if (valueStateText) {
+			announce(valueStateText, InvisibleMessageMode.Polite);
+		}
+	}
+
 	get _headerTitleText() {
 		return ComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 82730131ddec..1ff451382f70 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -287,6 +287,19 @@ <h3>ComboBox in Compact</h3>
 		</ui5-combobox>
 	</div>
 
+	<div class="demo-section">
+		<ui5-combobox id="value-state-error-text" value-state="Error">
+			<ui5-cb-item text="Algeria"></ui5-cb-item>
+			<ui5-cb-item text="Argentina"></ui5-cb-item>
+			<ui5-cb-item text="Australia"></ui5-cb-item>
+			<ui5-cb-item text="Austria"></ui5-cb-item>
+			<ui5-cb-item text="Bahrain"></ui5-cb-item>
+			<ui5-cb-item text="Belgium"></ui5-cb-item>
+			<ui5-cb-item text="Bosnia and Herzegovina"></ui5-cb-item>
+			<div slot="valueStateMessage">Please choose a country</div>
+		</ui5-combobox>
+	</div>
+
 	<script type="module">
 		document.getElementById("lazy").addEventListener("ui5-input", async event => {
 			const { value } = event.target;
diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
index 8cdb1eb8750a..13cbd8a25b6d 100644
--- a/packages/main/test/specs/ComboBox.spec.js
+++ b/packages/main/test/specs/ComboBox.spec.js
@@ -643,6 +643,24 @@ describe("Accessibility", async () => {
 		assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement2, "Span value is correct.")
 	});
 
+	it ("Announce value state header when on focus", async () => {
+		await browser.url(`test/pages/ComboBox.html`);
+
+		const combo = await browser.$("#value-state-error-text");
+		const arrow = await combo.shadow$("[input-icon]");
+		const input = await combo.shadow$("#ui5-combobox-input");
+		const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite");
+		const itemAnnouncement1 = "Please choose a country";
+
+		await arrow.click();
+
+		assert.strictEqual(await invisibleMessageSpan.getHTML(false), "", "Span value should be empty.")
+
+		await input.keys("ArrowDown");
+
+		assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement1, "Value state message is announced on focus.")
+	});
+
 	it ("Announce item with additional text on selection", async () => {
 		await browser.url(`test/pages/ComboBox.html`);