fix(ui5-input, ui5-multi-input, ui5-combobox, ui5-multi-combobox): announce value state type (#5515)

ndeshev · web-flow · commit 82317d0440cb · 2022-07-19T17:40:57.000+03:00
* fix(ui5-input, ui5-multi-input, ui5-combobox, ui5-multi-combobox): announce value state type related to #5392 * fix(ui5-input, ui5-multi-input, ui5-combobox, ui5-multi-combobox): announce value state type restore ui5-multi-input test page * fix(ui5-input, ui5-multi-input, ui5-combobox, ui5-multi-combobox): announce value state type fix messagebundle comments
diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
@@ -1,6 +1,6 @@
 <div class="ui5-combobox-root ui5-input-focusable-element">
 	{{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
 
 	<input id="ui5-combobox-input"
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -36,6 +36,10 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_INFORMATION,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
@@ -1009,7 +1013,19 @@ class ComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
@@ -1030,6 +1046,15 @@ class ComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get shouldOpenValueStateMessagePopover() {
 		return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 			&& !this.open && !this._isPhone;
diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -118,7 +118,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -46,6 +46,10 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS,
 	INPUT_SUGGESTIONS_TITLE,
 	INPUT_SUGGESTIONS_ONE_HIT,
@@ -1377,6 +1381,15 @@ class Input extends UI5Element {
 
 	onClose() {}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": Input.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": Input.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": Input.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": Input.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	valueStateTextMappings() {
 		return {
 			"Success": Input.i18nBundle.getText(VALUE_STATE_SUCCESS),
@@ -1450,15 +1463,15 @@ class Input extends UI5Element {
 	}
 
 	get ariaValueStateHiddenText() {
-		if (!this.hasValueStateMessage) {
+		if (!this.hasValueState) {
 			return;
 		}
 
 		if (this.shouldDisplayDefaultValueStateMessage) {
-			return this.valueStateText;
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateText}`;
 		}
 
-		return this.valueStateMessageText.map(el => el.textContent).join(" ");
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 	}
 
 	get itemSelectionAnnounce() {
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
@@ -3,7 +3,7 @@
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 
 	{{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
 
 	<ui5-tokenizer slot="_beginContent"
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -65,6 +65,10 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_INFORMATION,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
@@ -1447,7 +1451,19 @@ class MultiComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		let key = this.valueState;
 
 		if (this._performingSelectionTwice) {
@@ -1520,6 +1536,15 @@ class MultiComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": MultiComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get _innerInput() {
 		if (isPhone()) {
 			if (this.allItemsPopover && this.allItemsPopover.opened) {
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -120,7 +120,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -343,9 +343,21 @@ TREE_ITEM_ARIA_LABEL=Tree Item
 #XTOL: tooltip for expand icon in a tree item
 TREE_ITEM_EXPAND_NODE=Expand Node
 
-#XTOL: tooltip for collapse icon in a tree item
+#XACT: tooltip for collapse icon in a tree item
 TREE_ITEM_COLLAPSE_NODE=Collapse Node
 
+#XACT: the value state type that is preppended to value state error message text
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+#XACT: the value state type that is preppended to value state warning message text
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+#XACT: the value state type that is preppended to value state success message text
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+#XACT: the value state type that is preppended to value state information message text
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to have an error
 VALUE_STATE_ERROR=Invalid entry
 
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
@@ -71,19 +71,19 @@
 			<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">Information message. This is a <a href="#test1">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
-			<div slot="valueStateMessage">Information message 2. This is a <a href="#test2">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
+			<div slot="valueStateMessage">Custom error value state message with a <a href="#">Link</a>.</div>
+			<div slot="valueStateMessage">Additionl custom error value state message with a <a href="#">Link</a>. Extra long text used as an error message. Extra long text used as an error message - 2. Extra long text used as an error message - 3.</div>
 		</ui5-combobox>
-		<ui5-combobox id="" class="combobox2auto" value-state="Warning">
+		<ui5-combobox id="vs-warning-default" class="combobox2auto" value-state="Warning">
 			<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-combobox>
-		<ui5-combobox id="" class="combobox2auto" value-state="Information"></ui5-combobox>
-		<ui5-combobox id="" class="combobox2auto" value-state="Success"></ui5-combobox>
+		<ui5-combobox id="vs-information-default" class="combobox2auto" value-state="Information"></ui5-combobox>
+		<ui5-combobox id="vs-success-default" class="combobox2auto" value-state="Success"></ui5-combobox>
 	</div>
 
 	<div class="demo-section">
diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -99,8 +99,8 @@ <h3>Input with valueState and Dynamic suggestions</h3>
 		show-suggestions
 		value-state="Error"
 		placeholder="Search for a country ...">
-	<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
-	<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
+	<div slot="valueStateMessage">Custom error value state message with a <a href="#">Link</a>.</div>
+	<div slot="valueStateMessage">Additionl custom error value state message with a <a href="#">Link</a>. Extra long text used as an error message. Extra long text used as an error message - 2. Extra long text used as an error message - 3.</div>
 	</ui5-input>
 
 	<h3>Input with long suggestions with valueState and ui5-li</h3>
@@ -348,10 +348,10 @@ <h3>sap_horizon</h3>
 		<ui5-input placeholder="No Value State"></ui5-input>
 		<ui5-input placeholder="Disabled" disabled></ui5-input>
 		<ui5-input placeholder="ReadnOnly" readonly></ui5-input>
-		<ui5-input placeholder="Error ValueState" value-state="Error"></ui5-input>
-		<ui5-input placeholder="Warning ValueState" value-state="Warning"></ui5-input>
-		<ui5-input placeholder="Success ValueState" value-state="Success"></ui5-input>
-		<ui5-input placeholder="Information ValueState" value-state="Information"></ui5-input>
+		<ui5-input id="vs-error-default" placeholder="Error ValueState" value-state="Error"></ui5-input>
+		<ui5-input id="vs-warning-default" placeholder="Warning ValueState" value-state="Warning"></ui5-input>
+		<ui5-input id="vs-success-default" placeholder="Success ValueState" value-state="Success"></ui5-input>
+		<ui5-input id="vs-information-default" placeholder="Information ValueState" value-state="Information"></ui5-input>
 	</div>
 
 	<br>
diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
@@ -138,7 +138,7 @@
 		<span>value state information </span>
 
 		<br>
-		<ui5-multi-combobox allow-custom-values placeholder="Some initial text"
+		<ui5-multi-combobox allow-custom-values placeholder="Some initial text" id="mcb-information"
 			value-state="Information">
 			<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
 			<ui5-mcb-item text="Compact"></ui5-mcb-item>
diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
@@ -650,6 +650,58 @@ describe("Accessibility", async () => {
 
 		assert.ok(await combo.getProperty("focused"), "ComboBox to be focused");
 	});
+
+	it("Value state type should be added to the screen readers default value states announcement", async () => {
+		await browser.url(`test/pages/ComboBox.html`);
+
+		const cbWarning = await browser.$("#vs-warning-default");
+		const cbSuccess = await browser.$("#vs-success-default");
+		const cbInformation = await browser.$("#vs-information-default");
+
+		let staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-warning-default");
+		let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+
+		await cbWarning.click();
+
+		let ariaHiddenText = await cbWarning.shadow$(`#${staticAreaItemClassName}-valueStateDesc`).getHTML(false);
+		let valueStateText = await popover.$("div").getHTML(false);
+
+		assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");
+		assert.strictEqual(valueStateText.includes("Warning issued"), true, "Displayed value state message text is correct");
+
+		await cbWarning.keys("Escape");
+		await cbInformation.click();
+
+		staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-information-default");
+		popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+
+		ariaHiddenText = await cbInformation.shadow$(".ui5-hidden-text").getHTML(false);
+		valueStateText = await popover.$("div").getHTML(false);
+
+		assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");
+		assert.strictEqual(valueStateText.includes("Informative entry"), true, "Displayed value state message text is correct");
+
+		await cbInformation.keys("Escape");
+		await cbSuccess.click();
+
+		ariaHiddenText = await cbSuccess.shadow$(".ui5-hidden-text").getHTML(false);
+		assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");
+	});
+
+	it("Value state type should be added to the screen readers custom value states announcement", async () => {
+		const cbError = await browser.$("#value-state-error");
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-error");
+
+		await cbError.click();
+		await cbError.keys("a");
+
+		const popoverHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover .ui5-valuestatemessage-header");
+		const valueStateText = await popoverHeader.$("div").getHTML(false);
+		const ariaHiddenText = await cbError.shadow$(`#${staticAreaItemClassName}-valueStateDesc`).getHTML(false);
+
+		assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");
+		assert.strictEqual(valueStateText.includes("Custom error"), true, "Displayed value state message text is correct");
+	});
 });
 
 describe("Keyboard navigation", async () => {
diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -507,6 +507,64 @@ describe("Input general interaction", () => {
 		assert.strictEqual(await innerInputError.getAttribute("aria-invalid"), "true", "aria-invalid is set to true");
 	});
 
+	it("Value state type should be added to the screen readers default value states announcement", async () => {
+		const inputError = await browser.$("#vs-error-default");
+		const inputWarning = await browser.$("#vs-warning-default");
+		const inputSuccess = await browser.$("#vs-success-default");
+		const inputInformation = await browser.$("#vs-information-default");
+
+		let staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-error-default");
+		let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+
+		await inputError.click();
+
+		let ariaHiddenText = await inputError.shadow$(".ui5-hidden-text").getText();
+		let valueStateText = await popover.$("div").getText();
+
+		assert.strictEqual(ariaHiddenText, "Value State Error Invalid entry", "Hidden screen reader text is correct");
+		assert.strictEqual(valueStateText, "Invalid entry", "Displayed value state message text is correct");
+
+		await inputWarning.click();
+
+		staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-warning-default");
+		popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+
+		ariaHiddenText = await inputWarning.shadow$(".ui5-hidden-text").getText();
+		valueStateText = await popover.$("div").getText();
+
+		assert.strictEqual(ariaHiddenText, "Value State Warning Warning issued", "Hidden screen reader text is correct");
+		assert.strictEqual(valueStateText, "Warning issued", "Displayed value state message text is correct");
+
+		await inputInformation.click();
+
+		staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-information-default");
+		popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+
+		ariaHiddenText = await inputInformation.shadow$(".ui5-hidden-text").getText();
+		valueStateText = await popover.$("div").getText();
+
+		assert.strictEqual(ariaHiddenText, "Value State Information Informative entry", "Hidden screen reader text is correct");
+		assert.strictEqual(valueStateText, "Informative entry", "Displayed value state message text is correct");
+	
+		await inputSuccess.click();
+		assert.strictEqual(await inputSuccess.shadow$(".ui5-hidden-text").getText(), "Value State Success", "Hidden screen reader text is correct");
+	});
+
+	it("Value state type should be added to the screen readers custom value states announcement", async () => {
+		const inputError = await browser.$("#inputError");
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputError");
+
+		inputError.click();
+		inputError.keys("a");
+
+		const popoverHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover").$(".ui5-valuestatemessage-header");
+		const valueStateText = await popoverHeader.$("div").getText();
+		const ariaHiddenText = await inputError.shadow$(`#${staticAreaItemClassName}-valueStateDesc`).getText();
+
+		assert.strictEqual(ariaHiddenText.includes("Value State Error"), true, "Hidden screen reader text is correct");
+		assert.strictEqual(valueStateText.includes("Custom error value state message"), true, "Displayed value state message text is correct");
+	});
+
 	it("Tests autocomplete(type-ahead)", async () => {
 		let hasSelection;
 
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
