Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove aria-disabled attribute #1411

Merged
merged 1 commit into from
Sep 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
});
}
Expand Down
9 changes: 2 additions & 7 deletions ui.frontend/src/view/FormFieldBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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);
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions ui.tests/test-module/specs/button/button.runtime.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
5 changes: 5 additions & 0 deletions ui.tests/test-module/specs/checkbox/checkbox.runtime.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 6 additions & 0 deletions ui.tests/test-module/specs/dropdown/dropdown.runtime.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});

})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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());
});
});
Expand Down Expand Up @@ -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');
})
Expand Down
5 changes: 5 additions & 0 deletions ui.tests/test-module/specs/switch/switch.runtime.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
})
Expand Down
6 changes: 6 additions & 0 deletions ui.tests/test-module/specs/textinput/textinput.runtime.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -361,4 +366,5 @@ describe("setFocus on text field via rules", () => {
cy.get(`#${id}`).should('have.class', 'cmp-adaptiveform-textinput--filled');
});
});

})