From 9f2e133c6683bbde46969b68d646dc02211b9384 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Wed, 19 Aug 2020 13:56:31 +0300
Subject: [PATCH] fix(ui5-textarea): announce custom valueStateMessage

FIXES https://github.com/SAP/ui5-webcomponents/issues/2106
---
 packages/main/src/TextArea.hbs        |  5 +++++
 packages/main/src/TextArea.js         | 16 ++++++++++++++++
 packages/main/src/themes/TextArea.css |  2 ++
 3 files changed, 23 insertions(+)

diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
index 5efa945eb69a..b717d2ae04a3 100644
--- a/packages/main/src/TextArea.hbs
+++ b/packages/main/src/TextArea.hbs
@@ -25,6 +25,7 @@
 		?required="{{required}}"
 		maxlength="{{_exceededTextProps.calcedMaxLength}}"
 		aria-labelledby={{ariaLabelledBy}}
+		aria-describedby={{ariaDescribedBy}}
 		.value="{{value}}"
 		@input="{{_oninput}}"
 		@change="{{_onchange}}"
@@ -40,6 +41,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>
 
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
index a729b7a0dc25..7668dc84ce68 100644
--- a/packages/main/src/TextArea.js
+++ b/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;
 	}
diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css
index 194d367f36b3..3ad0113f1d3e 100644
--- a/packages/main/src/themes/TextArea.css
+++ b/packages/main/src/themes/TextArea.css
@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 }