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
SAP · Oct 30, 2023 · 1941854 · 1941854
1 parent 5a510cf
commit 1941854
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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`);