diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/clientlibs/site/js/checkboxgroupview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/clientlibs/site/js/checkboxgroupview.js index 38e3ff4cc6..39c6ce71e2 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/clientlibs/site/js/checkboxgroupview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/clientlibs/site/js/checkboxgroupview.js @@ -161,11 +161,9 @@ if (enabled === false) { if(state.readOnly === false){ widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled"); - widget.setAttribute(FormView.Constants.ARIA_DISABLED, true); } } else if (state.readOnly === false) { widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED); - widget.removeAttribute(FormView.Constants.ARIA_DISABLED); } }); } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/clientlibs/site/js/dropdownview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/clientlibs/site/js/dropdownview.js index 3deb8ba4a1..d32907b7d7 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/clientlibs/site/js/dropdownview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/clientlibs/site/js/dropdownview.js @@ -89,11 +89,9 @@ if (enabled === false) { if(state.readOnly === false){ widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled"); - widget.setAttribute(FormView.Constants.ARIA_DISABLED, true); } } else if (state.readOnly === false) { widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED); - widget.removeAttribute(FormView.Constants.ARIA_DISABLED); } } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/clientlibs/site/js/fileinputview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/clientlibs/site/js/fileinputview.js index 0ea97a3f75..db7ec8e38d 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/clientlibs/site/js/fileinputview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/clientlibs/site/js/fileinputview.js @@ -95,10 +95,8 @@ const isDisabled = !enabled || state.readOnly; if (isDisabled) { this.widget.setAttribute("disabled", "disabled"); - this.widget.setAttribute(FormView.Constants.ARIA_DISABLED, true); } else { this.widget.removeAttribute("disabled"); - this.widget.removeAttribute(FormView.Constants.ARIA_DISABLED); } } } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/clientlibs/site/js/fileinputview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/clientlibs/site/js/fileinputview.js index 2b65452467..771ef59586 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/clientlibs/site/js/fileinputview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/clientlibs/site/js/fileinputview.js @@ -92,10 +92,8 @@ const isDisabled = !enabled || state.readOnly; if (isDisabled) { this.widget.setAttribute("disabled", "disabled"); - this.widget.setAttribute(FormView.Constants.ARIA_DISABLED, true); } else { this.widget.removeAttribute("disabled"); - this.widget.removeAttribute(FormView.Constants.ARIA_DISABLED); } } } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputview.js index b5fae9b974..1b49d58f10 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputview.js @@ -92,10 +92,8 @@ const isDisabled = !enabled || state.readOnly; if (isDisabled) { this.widget.setAttribute("disabled", "disabled"); - this.widget.setAttribute(FormView.Constants.ARIA_DISABLED, true); } else { this.widget.removeAttribute("disabled"); - this.widget.removeAttribute(FormView.Constants.ARIA_DISABLED); } } } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/clientlibs/site/js/radiobuttonview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/clientlibs/site/js/radiobuttonview.js index ee8875bd28..e58e0c1563 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/clientlibs/site/js/radiobuttonview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/clientlibs/site/js/radiobuttonview.js @@ -100,11 +100,9 @@ if (enabled === false) { if(state.readOnly === false){ widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled"); - widget.setAttribute(FormView.Constants.ARIA_DISABLED, true); } } else if (state.readOnly === false) { widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED); - widget.removeAttribute(FormView.Constants.ARIA_DISABLED); } }); } diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js index 4097f6a891..4b58cc4323 100644 --- a/ui.frontend/src/view/FormFieldBase.js +++ b/ui.frontend/src/view/FormFieldBase.js @@ -234,16 +234,13 @@ class FormFieldBase extends FormField { widgetElement = widgetElements || widgetElement; const model = this.getModel?.(); - if (widgetElement && model?.screenReaderText && model?.enabled) { + if (widgetElement && model?.screenReaderText) { // Use DOMPurify to sanitize and strip HTML tags const screenReaderText = window.DOMPurify ? window.DOMPurify.sanitize(model.screenReaderText, { ALLOWED_TAGS: [] }) : model.screenReaderText; widgetElement.setAttribute('aria-label', screenReaderText); } } - - - /** * Synchronizes the markup with the model. * @method @@ -444,7 +441,7 @@ class FormFieldBase extends FormField { } } - /** + /** * Updates the HTML state based on the enabled state of the field. * @param {boolean} enabled - The enabled state. * @param {Object} state - The state object. @@ -454,10 +451,8 @@ class FormFieldBase extends FormField { this.element.setAttribute(Constants.DATA_ATTRIBUTE_ENABLED, enabled); if (enabled === false) { this.widget.setAttribute("disabled", "disabled"); - this.widget.setAttribute(Constants.ARIA_DISABLED, true); } else { this.widget.removeAttribute("disabled"); - this.widget.removeAttribute(Constants.ARIA_DISABLED); } } } diff --git a/ui.tests/test-module/specs/button/button.runtime.cy.js b/ui.tests/test-module/specs/button/button.runtime.cy.js index 9fb0d45b37..93d2149750 100644 --- a/ui.tests/test-module/specs/button/button.runtime.cy.js +++ b/ui.tests/test-module/specs/button/button.runtime.cy.js @@ -77,6 +77,11 @@ describe("Form Runtime with Button Input", () => { cy.toggleDescriptionTooltip(bemBlock, id); }); + it("Button should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[2]; + cy.get(`#${id} > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }); + it("should open a new window on click of button", () => { cy.window().then((win) => { diff --git a/ui.tests/test-module/specs/checkbox/checkbox.runtime.cy.js b/ui.tests/test-module/specs/checkbox/checkbox.runtime.cy.js index 1ae2992b6b..686edd6c5a 100644 --- a/ui.tests/test-module/specs/checkbox/checkbox.runtime.cy.js +++ b/ui.tests/test-module/specs/checkbox/checkbox.runtime.cy.js @@ -136,6 +136,11 @@ describe("Form Runtime with CheckBox Input", () => { }) }); + it("Checkbox should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[6]; + cy.get(`#${id} > .${bemBlock}__widget-container > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }) + it("should toggle description and tooltip", () => { const [id, fieldView] = Object.entries(formContainer._fields)[0] cy.toggleDescriptionTooltip(bemBlock, id); diff --git a/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js b/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js index eb8133969a..85ee4b2cb8 100644 --- a/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js +++ b/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js @@ -131,6 +131,11 @@ describe("Form Runtime with CheckBoxGroup Input", () => { }) }) + it("Checkbox group should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[0]; + cy.get(`#${id}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('not.have.attr', 'aria-disabled'); + }) + it("should enable and disable components on certain checkbox input", () => { // Rule on checkbox4: When checkbox4 has Item 3 selected => Enable checkbox1 and Disable checkBox2 diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js index 6b9e2133b2..f6445cfeb4 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.cy.js @@ -169,6 +169,11 @@ describe("Form Runtime with Date Picker", () => { }) }) + it("Datepicker should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[1]; + cy.get(`#${id} > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }) + it("should set and clear value based on rules", () => { // Rule on datePicker6: When input of datePicker6 is '2023-01-12', set value of datePicker4 to '2023-01-01' and clear value of datePicker1 diff --git a/ui.tests/test-module/specs/dropdown/dropdown.runtime.cy.js b/ui.tests/test-module/specs/dropdown/dropdown.runtime.cy.js index 8934eaae8d..edc05a764f 100644 --- a/ui.tests/test-module/specs/dropdown/dropdown.runtime.cy.js +++ b/ui.tests/test-module/specs/dropdown/dropdown.runtime.cy.js @@ -195,6 +195,12 @@ describe("Form with Dropdown", () => { }) }) + + it("Dropdown should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[5]; + cy.get(`#${id} > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }) + it("should update enum values on providing duplicate enums", () => { const [dropdown7, dropdown7FieldView] = Object.entries(formContainer._fields)[8]; diff --git a/ui.tests/test-module/specs/emailinput/emailinput.runtime.cy.js b/ui.tests/test-module/specs/emailinput/emailinput.runtime.cy.js index 8cf9b70f13..5dfc438251 100644 --- a/ui.tests/test-module/specs/emailinput/emailinput.runtime.cy.js +++ b/ui.tests/test-module/specs/emailinput/emailinput.runtime.cy.js @@ -109,6 +109,11 @@ describe("Form Runtime with Email Input", () => { }) }); + it("Email should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[1]; + cy.get(`#${id} > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }); + it("mandatory message set by user is displayed", () => { const [id, fieldView] = Object.entries(formContainer._fields)[3] cy.window().then($window => { diff --git a/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js b/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js index d13bfd4a25..5ce5f8969a 100644 --- a/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js +++ b/ui.tests/test-module/specs/fileinput/fileinputv3.runtime.cy.js @@ -196,6 +196,7 @@ describe("Form with File Input V-3 - Basic Tests", () => { it(`fielinput is disabled when readonly property is true`, () => { const fileInput5 = "input[name='fileinput5']"; cy.get(fileInput5).should("have.attr", "disabled", "disabled"); + cy.get(fileInput5).should("not.have.attr", "aria-disabled"); }); }) diff --git a/ui.tests/test-module/specs/numberinput/numberinput.runtime.cy.js b/ui.tests/test-module/specs/numberinput/numberinput.runtime.cy.js index 7097ab14c2..a4f0c85f34 100644 --- a/ui.tests/test-module/specs/numberinput/numberinput.runtime.cy.js +++ b/ui.tests/test-module/specs/numberinput/numberinput.runtime.cy.js @@ -177,6 +177,11 @@ describe("Form with Number Input", () => { }) }) + it("number input should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[2]; + cy.get(`#${id} > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }); + it("should set and clear value based on rules", () => { // Rule on numberInput5: When input of numberInput5 is 4502, set value of numberInput4 to 400 and clear value of numberInput1 diff --git a/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.cy.js b/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.cy.js index f2e8c1e7ae..661230be48 100644 --- a/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.cy.js +++ b/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.cy.js @@ -74,6 +74,7 @@ describe("Form with Radio Button Input", () => { return checkHTML(model.id, model.getState()); }).then(() => { model.enable = false; + cy.get(`#${id2}`).find(".cmp-adaptiveform-radiobutton__option__widget").should('not.have.attr', 'aria-disabled'); return checkHTML(model.id, model.getState()); }); }); @@ -111,6 +112,11 @@ describe("Form with Radio Button Input", () => { }); }); + it("Radio button should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[3]; + cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__option__widget").should('not.have.attr', 'aria-disabled'); + }) + it("should toggle description and tooltip", () => { cy.toggleDescriptionTooltip(bemBlock, 'tooltip_scenario_test'); }) diff --git a/ui.tests/test-module/specs/switch/switch.runtime.cy.js b/ui.tests/test-module/specs/switch/switch.runtime.cy.js index 8f067afa74..358166f62e 100644 --- a/ui.tests/test-module/specs/switch/switch.runtime.cy.js +++ b/ui.tests/test-module/specs/switch/switch.runtime.cy.js @@ -131,6 +131,11 @@ describe("Form Runtime with Switch Input", () => { }) }); + it("Switch should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[6]; + cy.get(`#${id} > .${bemBlock}__container > .${bemBlock}__widget-label > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }) + it("should toggle description and tooltip", () => { const id = formContainer._model.items[0].id; cy.toggleDescriptionTooltip(bemBlock, id); diff --git a/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.cy.js b/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.cy.js index 0403955fc9..7915a9ecc5 100644 --- a/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.cy.js +++ b/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.cy.js @@ -127,6 +127,11 @@ describe("Form Runtime with Telephone Input", () => { }) }); + it("Telephone input field should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[1]; + cy.get(`#${id} > .${bemBlock}__widget`).should('not.have.attr', 'aria-disabled'); + }); + it("should toggle description and tooltip", () => { cy.toggleDescriptionTooltip(bemBlock, 'tooltip_scenario_test'); }) diff --git a/ui.tests/test-module/specs/textinput/textinput.runtime.cy.js b/ui.tests/test-module/specs/textinput/textinput.runtime.cy.js index 9fb650dcd5..0bc6b721b9 100644 --- a/ui.tests/test-module/specs/textinput/textinput.runtime.cy.js +++ b/ui.tests/test-module/specs/textinput/textinput.runtime.cy.js @@ -134,6 +134,11 @@ describe("Form Runtime with Text Input", () => { cy.expectNoConsoleErrors(); }) + it("input field should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[1]; + cy.get(`#${id} > .cmp-adaptiveform-textinput__widget`).should('not.have.attr', 'aria-disabled'); + }) + it("should set valid to false and errorMessage other textfields on a certain string input", () => { // Rule on textbox9: When textbox9 is changed => set valid and error message property of textbox10 @@ -361,4 +366,5 @@ describe("setFocus on text field via rules", () => { cy.get(`#${id}`).should('have.class', 'cmp-adaptiveform-textinput--filled'); }); }); + })