From dedeb159921f19dc93333c3f6dd2a91c574b8b03 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 22 Oct 2020 10:56:24 +0300
Subject: [PATCH 1/3] fix(ui5-textarea): announce required textarea

---
 packages/main/src/TextArea.hbs                  | 4 ++++
 packages/main/src/TextArea.js                   | 9 +++++++++
 packages/main/src/i18n/messagebundle.properties | 3 +++
 3 files changed, 16 insertions(+)

diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
index c5418470ab01..e5c829a6e772 100644
--- a/packages/main/src/TextArea.hbs
+++ b/packages/main/src/TextArea.hbs
@@ -5,6 +5,9 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
+	{{#if ariaLabelledByText}}
+		<span id="{{_id}}-acc-text" class="ui5-hidden-text">{{ariaLabelledByText}}</span>
+	{{/if}}
 
 	{{#if growing}}
 		<div id="{{_id}}-mirror" style="{{styles.mirror}}" class="ui5-textarea-mirror" aria-hidden="true">
@@ -25,6 +28,7 @@
 		?required="{{required}}"
 		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
+		aria-labelledby="{{_id}}-acc-text"
 		aria-describedby="{{ariaDescribedBy}}"
 		maxlength="{{_exceededTextProps.calcedMaxLength}}"
 		.value="{{value}}"
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
index 5dd44ec63708..a093fcf82d04 100644
--- a/packages/main/src/TextArea.js
+++ b/packages/main/src/TextArea.js
@@ -18,6 +18,7 @@ import {
 	VALUE_STATE_WARNING,
 	TEXTAREA_CHARACTERS_LEFT,
 	TEXTAREA_CHARACTERS_EXCEEDED,
+	REQUIRED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -579,6 +580,14 @@ class TextArea extends UI5Element {
 		return effectiveAriaLabelText;
 	}
 
+	get ariaLabelledByText() {
+		let result = "";
+		result += this.placeholder ? this.placeholder : "";
+		result += this.required ? ` ${this.i18nBundle.getText(REQUIRED)}` : "";
+
+		return result;
+	}
+
 	get ariaDescribedBy() {
 		return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
 	}
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 3048d55b9b7c..17b5c6bd3e33 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -283,6 +283,9 @@ RATING_INDICATOR_TOOLTIP_TEXT=Rating
 #XBUT: Rating indicator aria-roledescription text
 RATING_INDICATOR_TEXT=Rating Indicator
 
+#XACT: ARIA announcement for a required component (e.g. inside a form)
+REQUIRED=Required
+
 #XACT: ARIA description for the segmented button
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button
 

From 4d436697df5f24c37953d2a3dca1f58ae4f12ffc Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Wed, 25 Nov 2020 15:00:37 +0200
Subject: [PATCH 2/3] fix comments

---
 packages/main/src/TextArea.hbs                |   6 -
 packages/main/src/TextArea.js                 |   9 -
 .../main/src/i18n/messagebundle.properties    |   3 -
 packages/main/test/pages/TextArea.html        | 176 ++----------------
 4 files changed, 15 insertions(+), 179 deletions(-)

diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
index e5c829a6e772..4eb8c25b2a79 100644
--- a/packages/main/src/TextArea.hbs
+++ b/packages/main/src/TextArea.hbs
@@ -5,10 +5,6 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
-	{{#if ariaLabelledByText}}
-		<span id="{{_id}}-acc-text" class="ui5-hidden-text">{{ariaLabelledByText}}</span>
-	{{/if}}
-
 	{{#if growing}}
 		<div id="{{_id}}-mirror" style="{{styles.mirror}}" class="ui5-textarea-mirror" aria-hidden="true">
 			{{#each _mirrorText}}
@@ -26,9 +22,7 @@
 		?disabled="{{disabled}}"
 		?readonly="{{readonly}}"
 		?required="{{required}}"
-		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
-		aria-labelledby="{{_id}}-acc-text"
 		aria-describedby="{{ariaDescribedBy}}"
 		maxlength="{{_exceededTextProps.calcedMaxLength}}"
 		.value="{{value}}"
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
index a093fcf82d04..5dd44ec63708 100644
--- a/packages/main/src/TextArea.js
+++ b/packages/main/src/TextArea.js
@@ -18,7 +18,6 @@ import {
 	VALUE_STATE_WARNING,
 	TEXTAREA_CHARACTERS_LEFT,
 	TEXTAREA_CHARACTERS_EXCEEDED,
-	REQUIRED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -580,14 +579,6 @@ class TextArea extends UI5Element {
 		return effectiveAriaLabelText;
 	}
 
-	get ariaLabelledByText() {
-		let result = "";
-		result += this.placeholder ? this.placeholder : "";
-		result += this.required ? ` ${this.i18nBundle.getText(REQUIRED)}` : "";
-
-		return result;
-	}
-
 	get ariaDescribedBy() {
 		return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
 	}
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 17b5c6bd3e33..3048d55b9b7c 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -283,9 +283,6 @@ RATING_INDICATOR_TOOLTIP_TEXT=Rating
 #XBUT: Rating indicator aria-roledescription text
 RATING_INDICATOR_TEXT=Rating Indicator
 
-#XACT: ARIA announcement for a required component (e.g. inside a form)
-REQUIRED=Required
-
 #XACT: ARIA description for the segmented button
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button
 
diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
index 1884155a7d46..959e9c03045e 100644
--- a/packages/main/test/pages/TextArea.html
+++ b/packages/main/test/pages/TextArea.html
@@ -58,167 +58,21 @@
 	</head>
 
 	<body style="background-color: var(--sapBackgroundColor);">
-
-	<section class="group">
-		<ui5-title>Value State Message</ui5-title>
-		<br>
-		<ui5-textarea id="textarea-value-state-msg" value="Test" value-state="Error">
-			<div id="value-state-msg" 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>
-		</ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Simple TextArea</ui5-title>
-		<ui5-textarea id="basic-textarea" placeholder="Basic text area">
-			<div slot="valueStateMessage">
-				This msg will not be displayed as no value-state is set.
-			</div>
-		</ui5-textarea>
-
-		<br>
-		<br>
-		<ui5-textarea id="basic-textarea-error" value="Test" value-state="Error"></ui5-textarea>
-
-		<br>
-		<br>
-		<ui5-textarea id="basic-textarea-warning" value="Test" value-state="Warning"></ui5-textarea>
-		<br>
-		<br>
-
-		<ui5-textarea id="basic-textarea-success" value="Test" value-state="Success"></ui5-textarea>
-		<br>
-		<br>
-
-		<br>
-		<br>
-		<ui5-textarea id="basic-textarea-error" value="Test" value-state="Information"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>TextArea with value</ui5-title>
-		<ui5-textarea id="fix-width-textarea" class="fixed-width" rows="8" value="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
-		magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-		gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
-		elitr, sed diam nonumy eirmod tempor invidunt ut la	bore et dolore magna aliquyam erat, sed diam voluptua. Lorem
-		ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
-		magna aliquyam erat"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Disabled TextArea</ui5-title>
-		<ui5-textarea id="disabled-textarea" class="fixed-width" disabled placeholder="Example of disabled text area"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Readonly TextArea</ui5-title>
-		<ui5-textarea id="readonly-textarea" class="fixed-width" readonly placeholder="Example of a read-only text area"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Required TextArea</ui5-title>
-		<ui5-textarea id="required-textarea" class="fixed-width" required placeholder="Example of a required text area"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: Growing</ui5-title>
-		<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: Growing with 8 initial rows</ui5-title>
-		<ui5-textarea id="eight-rows-textarea" class="fixed-width" growing placeholder="Growing Text Area" rows="8"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: Growing up to 4</ui5-title>
-		<ui5-textarea id="growing-ta-to-four" class="fixed-width" growing-max-lines="4" growing placeholder="Growing Text Area"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: Growing with initial rows 4 and growing up to 12</ui5-title>
-		<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area" growing-max-lines="12" rows="4"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: growing with max length 20 characters </ui5-title>
-		<ui5-textarea id="ta-max-length" class="fixed-width" growing maxlength="20" placeholder="Max length"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: max length 20 characters </ui5-title>
-		<ui5-textarea class="fixed-width" maxlength="20" placeholder="Max length"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: showExceededText with maxlength</ui5-title>
-		<ui5-textarea id="show-max-length" class="fixed-width fixed-height" maxlength="20" show-exceeded-text placeholder="Max length and Show Exceeded Text"></ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: change event</ui5-title>
-		<ui5-textarea id="textarea-change" class="fixed-width fixed-height" placeholder="Test change event"></ui5-textarea>
-	</section>
-	<section class="group">
-		<ui5-input id="changeResult" class="fixed-width"></ui5-input>
-	</section>
-
-	<section class="group">
-		<ui5-title>Text Area: input event</ui5-title>
-		<ui5-textarea id="textarea-input" class="fixed-width fixed-height" placeholder="Test input event"></ui5-textarea>
-	</section>
-	<section class="group">
-		<ui5-input id="inputResult" class="fixed-width"></ui5-input>
-	</section>
-
-	<section class="group">
-		<ui5-textarea
-			class="customTextArea fixed-width fixed-height"
-			maxlength="20"
-			show-exceeded-text
-		>
-		</ui5-textarea>
-	</section>
-
-	<section class="group">
-		<ui5-title>Growing: growing-max-lines="1"</ui5-title>
-		<br>
-		<ui5-textarea growing growing-max-lines="1"></ui5-textarea>
-
-		<ui5-title>Growing: growing-max-lines="4"</ui5-title>
-		<br>
-		<ui5-textarea growing growing-max-lines="4"></ui5-textarea>
-	</section>
-
-	<section class="group sapUiSizeCompact">
-		<ui5-title>Growing: growing-max-lines="1" (compact)</ui5-title>
-		<br>
-		<ui5-textarea growing growing-max-lines="1"></ui5-textarea>
-
-		<ui5-title>Growing: growing-max-lines="4" (compact)</ui5-title>
-		<br>
-		<ui5-textarea growing growing-max-lines="4"></ui5-textarea>
-	</section>
-
-	<section class="aria-label and aria-labelledby">
-		<span id="infoText">info text</span>
-		<ui5-textarea id="textAreaAriaLabel" aria-label="Hello World"></ui5-textarea>
-		<ui5-textarea id="textAreaAriaLabelledBy" maxlength="20" show-exceeded-text aria-labelledby="infoText" class="fixed-width fixed-height"></ui5-textarea>
-	</section>
-
-	<script>
-		var changeCounter = 0;
-		var inputCounter = 0;
-
-		document.getElementById('textarea-change').addEventListener("ui5-change", function (event) {
-			changeCounter += 1;
-			document.getElementById('changeResult').value = changeCounter;
-		});
-
-		document.getElementById('textarea-input').addEventListener("ui5-input", function (event) {
-			inputCounter += 1;
-			document.getElementById('inputResult').value = inputCounter;
-		});
-	</script>
+		<button id="button">open</button>
+		<ui5-popover id="popover">
+			<form action="">
+				<button>hi</button>
+				<ui5-label required show-colon for="txtarea">Hello world</ui5-label>
+				<ui5-textarea required="true" id="txtarea" value-state="None" placeholder="Cool description"></ui5-textarea>
+				<button>hi</button>
+			</form>
+		</ui5-popover>
+
+		<script>
+	button.addEventListener("click", event => {
+		popover.openBy(event.target);
+	})
+		</script>
 
 </body>
 </html>

From c696dad1c1b3e34d3b725b73181f141b7a723b0c Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Mon, 30 Nov 2020 10:59:23 +0200
Subject: [PATCH 3/3] fix html page

---
 packages/main/test/pages/TextArea.html | 178 ++++++++++++++++++++++---
 1 file changed, 162 insertions(+), 16 deletions(-)

diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
index 959e9c03045e..6c805bf4da47 100644
--- a/packages/main/test/pages/TextArea.html
+++ b/packages/main/test/pages/TextArea.html
@@ -58,21 +58,167 @@
 	</head>
 
 	<body style="background-color: var(--sapBackgroundColor);">
-		<button id="button">open</button>
-		<ui5-popover id="popover">
-			<form action="">
-				<button>hi</button>
-				<ui5-label required show-colon for="txtarea">Hello world</ui5-label>
-				<ui5-textarea required="true" id="txtarea" value-state="None" placeholder="Cool description"></ui5-textarea>
-				<button>hi</button>
-			</form>
-		</ui5-popover>
-
-		<script>
-	button.addEventListener("click", event => {
-		popover.openBy(event.target);
-	})
-		</script>
+
+	<section class="group">
+		<ui5-title>Value State Message</ui5-title>
+		<br>
+		<ui5-textarea id="textarea-value-state-msg" value="Test" value-state="Error">
+			<div id="value-state-msg" 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>
+		</ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Simple TextArea</ui5-title>
+		<ui5-textarea id="basic-textarea" placeholder="Basic text area">
+			<div slot="valueStateMessage">
+				This msg will not be displayed as no value-state is set.
+			</div>
+		</ui5-textarea>
+
+		<br>
+		<br>
+		<ui5-textarea id="basic-textarea-error" value="Test" value-state="Error"></ui5-textarea>
+
+		<br>
+		<br>
+		<ui5-textarea id="basic-textarea-warning" value="Test" value-state="Warning"></ui5-textarea>
+		<br>
+		<br>
+
+		<ui5-textarea id="basic-textarea-success" value="Test" value-state="Success"></ui5-textarea>
+		<br>
+		<br>
+
+		<br>
+		<br>
+		<ui5-textarea id="basic-textarea-error" value="Test" value-state="Information"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>TextArea with value</ui5-title>
+		<ui5-textarea id="fix-width-textarea" class="fixed-width" rows="8" value="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+		magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+		gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+		elitr, sed diam nonumy eirmod tempor invidunt ut la	bore et dolore magna aliquyam erat, sed diam voluptua. Lorem
+		ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+		magna aliquyam erat"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Disabled TextArea</ui5-title>
+		<ui5-textarea id="disabled-textarea" class="fixed-width" disabled placeholder="Example of disabled text area"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Readonly TextArea</ui5-title>
+		<ui5-textarea id="readonly-textarea" class="fixed-width" readonly placeholder="Example of a read-only text area"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Required TextArea</ui5-title>
+		<ui5-textarea id="required-textarea" class="fixed-width" required placeholder="Example of a required text area"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: Growing</ui5-title>
+		<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: Growing with 8 initial rows</ui5-title>
+		<ui5-textarea id="eight-rows-textarea" class="fixed-width" growing placeholder="Growing Text Area" rows="8"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: Growing up to 4</ui5-title>
+		<ui5-textarea id="growing-ta-to-four" class="fixed-width" growing-max-lines="4" growing placeholder="Growing Text Area"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: Growing with initial rows 4 and growing up to 12</ui5-title>
+		<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area" growing-max-lines="12" rows="4"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: growing with max length 20 characters </ui5-title>
+		<ui5-textarea id="ta-max-length" class="fixed-width" growing maxlength="20" placeholder="Max length"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: max length 20 characters </ui5-title>
+		<ui5-textarea class="fixed-width" maxlength="20" placeholder="Max length"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: showExceededText with maxlength</ui5-title>
+		<ui5-textarea id="show-max-length" class="fixed-width fixed-height" maxlength="20" show-exceeded-text placeholder="Max length and Show Exceeded Text"></ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: change event</ui5-title>
+		<ui5-textarea id="textarea-change" class="fixed-width fixed-height" placeholder="Test change event"></ui5-textarea>
+	</section>
+	<section class="group">
+		<ui5-input id="changeResult" class="fixed-width"></ui5-input>
+	</section>
+
+	<section class="group">
+		<ui5-title>Text Area: input event</ui5-title>
+		<ui5-textarea id="textarea-input" class="fixed-width fixed-height" placeholder="Test input event"></ui5-textarea>
+	</section>
+	<section class="group">
+		<ui5-input id="inputResult" class="fixed-width"></ui5-input>
+	</section>
+
+	<section class="group">
+		<ui5-textarea
+			class="customTextArea fixed-width fixed-height"
+			maxlength="20"
+			show-exceeded-text
+		>
+		</ui5-textarea>
+	</section>
+
+	<section class="group">
+		<ui5-title>Growing: growing-max-lines="1"</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="1"></ui5-textarea>
+
+		<ui5-title>Growing: growing-max-lines="4"</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="4"></ui5-textarea>
+	</section>
+
+	<section class="group sapUiSizeCompact">
+		<ui5-title>Growing: growing-max-lines="1" (compact)</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="1"></ui5-textarea>
+
+		<ui5-title>Growing: growing-max-lines="4" (compact)</ui5-title>
+		<br>
+		<ui5-textarea growing growing-max-lines="4"></ui5-textarea>
+	</section>
+
+	<section class="aria-label and aria-labelledby">
+		<span id="infoText">info text</span>
+		<ui5-textarea id="textAreaAriaLabel" aria-label="Hello World"></ui5-textarea>
+		<ui5-textarea id="textAreaAriaLabelledBy" maxlength="20" show-exceeded-text aria-labelledby="infoText" class="fixed-width fixed-height"></ui5-textarea>
+	</section>
+
+	<script>
+		var changeCounter = 0;
+		var inputCounter = 0;
+
+		document.getElementById('textarea-change').addEventListener("ui5-change", function (event) {
+			changeCounter += 1;
+			document.getElementById('changeResult').value = changeCounter;
+		});
+
+		document.getElementById('textarea-input').addEventListener("ui5-input", function (event) {
+			inputCounter += 1;
+			document.getElementById('inputResult').value = inputCounter;
+		});
+	</script>
 
 </body>
-</html>
+</html>
\ No newline at end of file