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", () => {