fix: input-based components do not have required attribute anymore

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,6 +24,7 @@
 			aria-autocomplete="{{accInfo.input.ariaAutoComplete}}"
 			aria-expanded="{{accInfo.input.ariaExpanded}}"
 			aria-label="{{accInfo.input.ariaLabel}}"
+			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", () => {