fix(ui5-textarea): enhance aria-invalid attribute handling (#4767)

SAP · Feb 17, 2022 · f2fd6fb · f2fd6fb
1 parent f8dc9f0
commit f2fd6fb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
@@ -1,7 +1,6 @@
 <div
 	class="ui5-textarea-root"
 	style="{{styles.main}}"
-	?aria-invalid="{{ariaInvalid}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
@@ -23,6 +22,7 @@
 		?readonly="{{readonly}}"
 		aria-label="{{ariaLabelText}}"
 		aria-describedby="{{ariaDescribedBy}}"
+		aria-invalid="{{ariaInvalid}}"
 		aria-required="{{required}}"
 		maxlength="{{_exceededTextProps.calcedMaxLength}}"
 		.value="{{value}}"

diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -494,6 +494,16 @@ describe("Input general interaction", () => {
 		assert.strictEqual(await innerInput.getAttribute("aria-label"), NEW_TEXT, "aria-label is reflected in the shadow DOM")
 	});
 
+	it("Checks if aria-invalid is set correctly", async () => {
+		const inputError = await browser.$("#inputError");
+		const inputWarning = await browser.$("#input1"); 
+		const innerInputError = await inputError.shadow$("input");
+		const innerInputWarning = await inputWarning.shadow$("input");
+
+		assert.notOk(await innerInputWarning.getAttribute("aria-invalid"), "aria-invalid is not rendered");
+		assert.strictEqual(await innerInputError.getAttribute("aria-invalid"), "true", "aria-invalid is set to true");
+	});
+
 	it("Tests suggestions highlighting", async () => {
 		const input = await browser.$("#myInputHighlighted").shadow$("input");
 		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInputHighlighted");

diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js
@@ -47,6 +47,16 @@ describe("Attributes propagation", () => {
 		assert.strictEqual(await textArea2.getAttribute("aria-label"), EXPECTED_ARIA_LABEL2,
 			"The aria-label is correctly set internally.");
 	});
+
+	it("Checks if aria-invalid is set correctly", async () => {
+		const textAreaError = await browser.$("#basic-textarea-error");
+		const textAreaWarning = await browser.$("#basic-textarea-warning"); 
+		const innertextAreaError = await textAreaError.shadow$("textarea");
+		const innertextAreaWarning = await textAreaWarning.shadow$("textarea");
+
+		assert.notOk(await innertextAreaWarning.getAttribute("aria-invalid"), "aria-invalid is not rendered");
+		assert.strictEqual(await innertextAreaError.getAttribute("aria-invalid"), "true", "aria-invalid is set to true");
+	});
 });
 
 describe("disabled and readonly textarea", () => {