fix(ui5-textarea): announce custom valueStateMessage (#2122)

FIXES #2106

Author: ilhan007

packages/main/src/TextArea.hbs

@@ -25,6 +25,7 @@
 		?required="{{required}}"
 		aria-required="{{required}}"
 		aria-labelledby={{ariaLabelledBy}}
+		aria-describedby={{ariaDescribedBy}}
 		maxlength="{{_exceededTextProps.calcedMaxLength}}"
 		.value="{{value}}"
 		@input="{{_oninput}}"
@@ -41,6 +42,10 @@
 		<span id="{{_id}}-exceededText" class="ui5-textarea-exceeded-text">{{_exceededTextProps.exceededText}}</span>
 	{{/if}}
 
+	{{#if hasValueState}}
+		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
+	{{/if}}
+
 	<slot name="formSupport"></slot>
 </div>
 

packages/main/src/TextArea.js

@@ -543,6 +543,22 @@ class TextArea extends UI5Element {
 		return this.showExceededText ? `${this._id}-exceededText` : undefined;
 	}
 
+	get ariaDescribedBy() {
+		return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
+	}
+
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.hasCustomValueState) {
+			return this.valueStateMessageText.map(el => el.textContent).join(" ");
+		}
+
+		return this.valueStateText;
+	}
+
 	get ariaInvalid() {
 		return this.valueState === "Error" ? "true" : undefined;
 	}

packages/main/src/themes/TextArea.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 }