Remove aria-disabled attribute

adobe · Sep 19, 2024 · c5d690a · c5d690a
1 parent 5632a38
commit c5d690a
Show file tree

Hide file tree

Showing 19 changed files with 61 additions and 19 deletions.
diff --git a/...fd/components/form/checkboxgroup/v1/checkboxgroup/clientlibs/site/js/checkboxgroupview.js b/...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/...root/apps/core/fd/components/form/dropdown/v1/dropdown/clientlibs/site/js/dropdownview.js b/...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/...t/apps/core/fd/components/form/fileinput/v1/fileinput/clientlibs/site/js/fileinputview.js b/...t/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/...t/apps/core/fd/components/form/fileinput/v2/fileinput/clientlibs/site/js/fileinputview.js b/...t/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/...t/apps/core/fd/components/form/fileinput/v3/fileinput/clientlibs/site/js/fileinputview.js b/...t/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/.../core/fd/components/form/radiobutton/v1/radiobutton/clientlibs/site/js/radiobuttonview.js b/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');
         });
     });
+
 })