diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
index c75e663d8881..87ed9524a267 100644
--- a/packages/main/src/ComboBox.hbs
+++ b/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}}
diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs
index 1b658c85b523..832a9384a0a3 100644
--- a/packages/main/src/DatePicker.hbs
+++ b/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}}"
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
index 8e4b07da60dd..b819bfc2dea4 100644
--- a/packages/main/src/DatePicker.js
+++ b/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),
};
}
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
index a156a5fba97b..21ceaaf738da 100644
--- a/packages/main/src/Input.hbs
+++ b/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}}"
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 017fd8782f8e..9ac396e469fd 100644
--- a/packages/main/src/Input.js
+++ b/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,
},
};
}
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index 4bb820f3a55b..f3c4298d9070 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/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}}
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index 8b4c9f782799..2bf91731cdb8 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -30,7 +30,6 @@
.value="{{value}}"
inner-input
placeholder="{{placeholder}}"
- ?required={{required}}
value-state="{{valueState}}"
@input="{{_inputLiveChange}}"
@change={{_inputChange}}
diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
index 4eb8c25b2a79..355440b504e1 100644
--- a/packages/main/src/TextArea.hbs
+++ b/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}}"
diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html
index 20e21727913a..71319d4a0762 100644
--- a/packages/main/test/pages/DatePicker_test_page.html
+++ b/packages/main/test/pages/DatePicker_test_page.html
@@ -36,6 +36,7 @@
+
diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
index 366690641b7f..4940580cce86 100644
--- a/packages/main/test/specs/DatePicker.spec.js
+++ b/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");
diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
index 38ee662d7d4e..3228f73eb97d 100644
--- a/packages/main/test/specs/Input.spec.js
+++ b/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", () => {
diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js
index 1c93baeff474..1343928a723e 100644
--- a/packages/main/test/specs/TextArea.spec.js
+++ b/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", () => {