fix(ui5-input): don't render aria-describedby if not neccessary (#2512)

SAP · Nov 24, 2020 · e7dd012 · e7dd012
1 parent 30d9d2b
commit e7dd012
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -1047,16 +1047,18 @@ class Input extends UI5Element {
 		return this.hasValueState ? `${this._id}-valueStateDesc` : "";
 	}
 
+	get suggestionsCount() {
+		return this.showSuggestions ? `${this._id}-suggestionsCount` : "";
+	}
+
 	get accInfo() {
 		const ariaHasPopupDefault = this.showSuggestions ? "true" : undefined;
 		const ariaAutoCompleteDefault = this.showSuggestions ? "list" : undefined;
-		const ariaDescribedBy = this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this._id}-suggestionsCount ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId} ${this._id}-suggestionsCount`.trim();
+		const ariaDescribedBy = this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount} ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount}`.trim();
 
 		return {
-			"wrapper": {
-			},
 			"input": {
-				"ariaDescribedBy": ariaDescribedBy,
+				"ariaDescribedBy": ariaDescribedBy || undefined,
 				"ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
 				"ariaHasPopup": this._inputAccInfo.ariaHasPopup ? this._inputAccInfo.ariaHasPopup : ariaHasPopupDefault,
 				"ariaAutoComplete": this._inputAccInfo.ariaAutoComplete ? this._inputAccInfo.ariaAutoComplete : ariaAutoCompleteDefault,

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -78,7 +78,7 @@ <h3> Input disabled</h3>
 	<input />
 
 	<h3> Input maxLength = 5</h3>
-	<ui5-input maxLength="5" placeholder="Max length of 5"></ui5-input>
+	<ui5-input id="input-max-length" maxLength="5" placeholder="Max length of 5"></ui5-input>
 
 	<h3> Input valueState Success</h3>
 	<ui5-input id="input3" value-state="Success" placeholder="Success state ...">

diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -289,6 +289,13 @@ describe("Input general interaction", () => {
 		assert.ok(respPopover, "Responsive popover with valueStateMessage should be opened.");
 	});
 
+	it("Checks if aria-describedby is renderd if not neccessary", () => {
+		const input = browser.$("#input-max-length"); // Input with no show-suggestions attribute
+		const innerInput = input.shadow$("input");
+
+		assert.notOk(innerInput.getAttribute("aria-describedby"), "aria-describedby is not rendered");
+	});
+
 	it("Checks if aria-label is reflected in the shadow DOM", () => {
 		const input = browser.$("#aria-label-input");
 		const innerInput = input.shadow$("input");