feat(ui5-input): implement aria-label (#1782)

SAP · Jun 12, 2020 · a588ffe · a588ffe
1 parent df9e4e9
commit a588ffe
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -23,6 +23,7 @@
 			aria-describedby="{{accInfo.input.ariaDescribedBy}}"
 			aria-autocomplete="{{accInfo.input.ariaAutoComplete}}"
 			aria-expanded="{{accInfo.input.ariaExpanded}}"
+			aria-label="{{accInfo.input.ariaLabel}}"
 			@input="{{_handleInput}}"
 			@change="{{_handleChange}}"
 			@keydown="{{_onkeydown}}"

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -270,6 +270,15 @@ const metadata = {
 			type: Integer,
 		},
 
+		/**
+		 * @type {String}
+		 * @since 1.0.0-rc.8
+		 * @public
+		 */
+		ariaLabel: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -862,6 +871,7 @@ class Input extends UI5Element {
 				"ariaOwns": this._inputAccInfo && this._inputAccInfo.ariaOwns,
 				"ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded,
 				"ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription,
+				"ariaLabel": this.ariaLabel,
 			},
 		};
 	}

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -158,6 +158,9 @@ <h3> Input type 'Tel'</h3>
 	<h3> Input type 'URL'</h3>
 	<ui5-input id="input-url" type="URL"></ui5-input>
 
+	<h3> Input With aria-label</h3>
+	<ui5-input id="aria-label-input" aria-label="Enter your secret password"></ui5-input>
+
 	<h3> Inputs alignment</h3>
 	<ui5-button>Press</ui5-button>
 	<ui5-datepicker  id='dp5'

diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -186,7 +186,7 @@ describe("Input general interaction", () => {
 		assert.strictEqual(suggestionsInput.getValue(), "Cozy", "First item has been selected");
 		assert.strictEqual(inputResult.getValue(), "1", "suggestionItemSelected event called once");
 
-		suggestionsInput.keys("c"); // to open the suggestions pop up once again 
+		suggestionsInput.keys("c"); // to open the suggestions pop up once again
 		suggestionsInput.keys("ArrowUp");
 
 		assert.strictEqual(suggestionsInput.getValue(), "Condensed", "First item has been selected");
@@ -230,11 +230,23 @@ describe("Input general interaction", () => {
 		const respPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover .ui5-responsive-popover-header");
 
 		inputShadowRef.click();
-		
+
 		assert.ok(popover.getProperty("opened"), "Popover with valueStateMessage should be opened.");
 
 		inputShadowRef.keys("a");
 
 		assert.ok(respPopover, "Responsive popover with valueStateMessage should be opened.");
 	});
+
+	it("Checks if aria-label is reflected in the shadow DOM", () => {
+		const input = browser.$("#aria-label-input");
+		const innerInput = input.shadow$("input");
+		const NEW_TEXT = "New cool text";
+
+		assert.strictEqual(input.getAttribute("aria-label"), innerInput.getAttribute("aria-label"), "aria-label is reflected in the shadow DOM")
+
+		input.setAttribute("aria-label", NEW_TEXT);
+
+		assert.strictEqual(innerInput.getAttribute("aria-label"), NEW_TEXT, "aria-label is reflected in the shadow DOM")
+	});
 });