fix(ui5-input): aria-required attribute removed (#2552)

Some of the input-based components have had both "required" and "aria-required" attributes rendered to the inner input when the required property of the component is set to true which is not necessary.
Now, only "aria-required" attribute is rendered, since it is more appropriate in order to avoid "Invalid entry" to be read out when the component is accessed and has no value, which is the expected behaviour when "required" attribute is set, but is a little bit confusing for the users.

Author: niyap

packages/main/src/ComboBox.hbs

@@ -9,7 +9,6 @@
 		placeholder="{{placeholder}}"
 		?disabled={{disabled}}
 		?readonly={{readonly}}
-		?required={{required}}
 		value-state="{{valueState}}"
 		@input="{{_input}}"
 		@change="{{_inputChange}}"
@@ -23,6 +22,7 @@
 		aria-autocomplete="both"
 		aria-describedby="{{valueStateTextId}}"
 		aria-label="{{ariaLabelText}}"
+		aria-required="{{required}}"
 	/>
 
 	{{#if icon}}

packages/main/src/DatePicker.hbs

@@ -12,6 +12,7 @@
 			type="{{type}}"
 			value="{{value}}"
 			?disabled="{{disabled}}"
+			?required="{{required}}"
 			?readonly="{{readonly}}"
 			value-state="{{valueState}}"
 			@ui5-change="{{_handleInputChange}}"

packages/main/src/DatePicker.js

@@ -823,7 +823,6 @@ class DatePicker extends UI5Element {
 			"ariaOwns": `${this._id}-responsive-popover`,
 			"ariaExpanded": this.isOpen(),
 			"ariaDescription": this.dateAriaDescription,
-			"ariaRequired": this.required,
 			"ariaLabel": getEffectiveAriaLabelText(this),
 		};
 	}

packages/main/src/Input.hbs

@@ -13,7 +13,6 @@
 			?inner-input-with-icon="{{icon.length}}"
 			?disabled="{{disabled}}"
 			?readonly="{{_readonly}}"
-			?required="{{required}}"
 			.value="{{value}}"
 			placeholder="{{placeholder}}"
 			maxlength="{{maxlength}}"
@@ -25,7 +24,7 @@
 			aria-autocomplete="{{accInfo.input.ariaAutoComplete}}"
 			aria-expanded="{{accInfo.input.ariaExpanded}}"
 			aria-label="{{accInfo.input.ariaLabel}}"
-			aria-required="{{accInfo.input.ariaRequired}}"
+			aria-required="{{required}}"
 			@input="{{_handleInput}}"
 			@change="{{_handleChange}}"
 			@keydown="{{_onkeydown}}"

packages/main/src/Input.js

@@ -1067,7 +1067,6 @@ class Input extends UI5Element {
 				"ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded,
 				"ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription,
 				"ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || getEffectiveAriaLabelText(this),
-				"ariaRequired": (this._inputAccInfo && this._inputAccInfo.ariaRequired) || this.required,
 			},
 		};
 	}

packages/main/src/MultiComboBox.hbs

@@ -38,7 +38,6 @@
 		placeholder="{{placeholder}}"
 		?disabled={{disabled}}
 		?readonly={{readonly}}
-		?required={{required}}
 		value-state="{{valueState}}"
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
@@ -53,6 +52,7 @@
 		aria-autocomplete="both"
 		aria-labelledby="{{_id}}-hiddenText-nMore"
 		aria-describedby="{{valueStateTextId}}"
+		aria-required="{{required}}"
 	/>
 
 	{{#if icon}}

packages/main/src/MultiComboBoxPopover.hbs

@@ -30,7 +30,6 @@
 						.value="{{value}}"
 						inner-input
 						placeholder="{{placeholder}}"
-						?required={{required}}
 						value-state="{{valueState}}"
 						@input="{{_inputLiveChange}}"
 						@change={{_inputChange}}

packages/main/src/TextArea.hbs

@@ -21,9 +21,9 @@
 		placeholder="{{placeholder}}"
 		?disabled="{{disabled}}"
 		?readonly="{{readonly}}"
-		?required="{{required}}"
 		aria-label="{{ariaLabelText}}"
 		aria-describedby="{{ariaDescribedBy}}"
+		aria-required="{{required}}"
 		maxlength="{{_exceededTextProps.calcedMaxLength}}"
 		.value="{{value}}"
 		@input="{{_oninput}}"

packages/main/test/pages/DatePicker_test_page.html

@@ -36,6 +36,7 @@
 	<ui5-date-picker id="dp8" value="Jan 6, 2015"></ui5-date-picker>
 	<ui5-date-picker id="dp9" value="today"></ui5-date-picker>
 	<ui5-date-picker id="dp10" disabled></ui5-date-picker>
+	<ui5-date-picker id='dp-required' required></ui5-date-picker>
 	<ui5-date-picker id="dp11"></ui5-date-picker>
 	<ui5-date-picker id="dp13"></ui5-date-picker>
 	<ui5-date-picker id="dp16" format-pattern="long"></ui5-date-picker>

packages/main/test/specs/DatePicker.spec.js

@@ -86,6 +86,18 @@ describe("Date Picker Tests", () => {
 		assert.ok(!datepicker.hasIcon(), "icon is not displayed");
 	});
 
+	it("required", () => {
+		datepicker.id = "#dp-required";
+
+		assert.ok(datepicker.input.getProperty("required"), "input has required set");
+		assert.strictEqual(datepicker.innerInput.getAttribute("aria-required"), "true", "Aria-required attribute is set correctly.");
+
+		datepicker.root.removeAttribute("required");
+
+		assert.notOk(datepicker.input.getProperty("required"), "required property is not set");
+		assert.strictEqual(datepicker.innerInput.getAttribute("aria-required"), "false", "Aria-required attribute is set correctly.");
+	});
+
 	it("placeholder", () => {
 		datepicker.root.setAttribute("placeholder", "test placeholder");
 

packages/main/test/specs/Input.spec.js

@@ -23,7 +23,8 @@ describe("Attributes propagation", () => {
 	});
 
 	it("Required attribute is propagated properly", () => {
-		assert.ok(browser.$("#input-required").shadow$(".ui5-input-inner").getAttribute("required"), "Required property was propagated");
+		assert.strictEqual(browser.$("#input-required").shadow$(".ui5-input-inner").getAttribute("aria-required"), "true", "Aria-required attribute is set correctly");
+		assert.strictEqual(browser.$("#input-number").shadow$(".ui5-input-inner").getAttribute("aria-required"), "false", "Aria-required attribute is set correctly");
 	});
 
 	it("Type attribute is propagated properly", () => {

packages/main/test/specs/TextArea.spec.js

@@ -23,7 +23,8 @@ describe("Attributes propagation", () => {
 	});
 
 	it("Required attribute is propagated properly", () => {
-		assert.ok(browser.$("#required-textarea").shadow$("textarea").getAttribute("required"), "Required property was propagated");
+		assert.strictEqual(browser.$("#required-textarea").shadow$("textarea").getAttribute("aria-required"), "true", "Aria-required attribute is set correctly");
+		assert.strictEqual(browser.$("#basic-textarea").shadow$("textarea").getAttribute("aria-required"), "false", "Aria-required attribute is set correctly");
 	});
 
 	it("Value attribute is propagated properly", () => {