From 1bf677f9b3499a50895bac72952757fa8c760cf5 Mon Sep 17 00:00:00 2001 From: Pavitra Khatri Date: Wed, 27 Mar 2024 13:55:23 +0530 Subject: [PATCH] Added Aria Invalid attribute --- .../v1/fieldTemplates/longDescription.html | 4 +- .../v1/fieldTemplates/shortDescription.html | 2 +- .../form/checkbox/v1/checkbox/checkbox.html | 1 - .../clientlibs/site/js/checkboxgroupview.js | 6 +++ .../datepicker/v1/datepicker/datepicker.html | 1 - .../form/dropdown/v1/dropdown/dropdown.html | 1 - .../emailinput/v1/emailinput/emailinput.html | 1 - .../fileinput/v2/fileinput/fileinput.html | 1 - .../v1/numberinput/numberinput.html | 1 - .../clientlibs/site/js/radiobuttonview.js | 7 ++++ .../v1/radiobutton/radiobutton.html | 4 +- .../form/switch/v1/switch/switch.html | 1 - .../v1/telephoneinput/telephoneinput.html | 1 - .../fd/components/form/text/v1/text/text.html | 1 - .../textinput/v1/textinput/textinput.html | 1 - .../v1/toggleablelink/widget.html | 1 - ui.frontend/src/utils.js | 16 -------- ui.frontend/src/view/FormFieldBase.js | 37 ++++++++++++++++++- ui.frontend/src/view/FormOptionFieldBase.js | 2 - .../actions/setFocus/setFocus.runtime.spec.js | 2 +- .../specs/checkbox/checkbox.runtime.spec.js | 3 +- .../checkboxgroup.runtime.spec.js | 2 + .../datepicker/datepicker.runtime.spec.js | 3 +- .../specs/dropdown/dropdown.runtime.spec.js | 3 +- .../emailinput/emailinput.runtime.spec.js | 3 +- .../specs/fileinput/fileinput.runtime.spec.js | 1 + .../numberinput/numberinput.runtime.spec.js | 3 +- .../panelcontainer.runtime.spec.js | 6 +++ .../radiobutton/radiobutton.runtime.spec.js | 5 ++- .../specs/switch/switch.runtime.spec.js | 3 +- .../telephoneinput.runtime.spec.js | 3 +- .../specs/textinput/textinput.runtime.spec.js | 3 +- 32 files changed, 82 insertions(+), 47 deletions(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/longDescription.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/longDescription.html index 43a947c65a..560b31eb5c 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/longDescription.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/longDescription.html @@ -1,7 +1,5 @@ \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html index 0340e222db..3fa10a15e8 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html index 4f86bf3fd1..f5316ce0dc 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html @@ -41,7 +41,6 @@ id="${checkbox.id}_widget" title="${checkbox.tooltipVisible ? '' : checkbox.tooltipText}" name="${checkbox.name}" - aria-describedby="${checkbox.id}__errormessage ${checkbox.id}__longdescription ${checkbox.id}__shortdescription" value="${checkbox.default[0]}" disabled="${!checkbox.enabled}" /> 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 e9236db52f..213f2978f7 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 @@ -111,6 +111,12 @@ } } + updateValidity(validity) { + const valid = validity.valid ? validity.valid : false; + let widgets = this.widget; + widgets.forEach(widget => widget.setAttribute(FormView.Constants.ARIA_INVALID, !valid)); + } + updateValue(modelValue) { modelValue = [].concat(modelValue); let selectedWidgetValues = modelValue.map(String); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html index b8a799f274..4326e7e89d 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html @@ -46,7 +46,6 @@ title="${datePicker.tooltipVisible ? '' : datePicker.tooltipText}" id="${widgetId}" placeholder="${datePicker.placeHolder}" - aria-describedby="${datePicker.id}__errormessage ${datePicker.id}__longdescription ${datePicker.id}__shortdescription" min="${datePicker.minimumDate}" max="${datePicker.maximumDate}"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html index 0d9abef0c0..075a023aac 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html @@ -43,7 +43,6 @@ data-cmp-data-layer="${dropdown.data.json}" disabled="${!dropdown.enabled || dropdown.readOnly}" required="${dropdown.required}" - aria-describedby="${dropdown.id}__errormessage ${dropdown.id}__longdescription ${dropdown.id}__shortdescription" data-sly-attribute.multiple="${dropdown.isMultiSelect ? 'multiple' : ''}" aria-readonly="${dropdown.readOnly ? 'true' : ''}">
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html index 513e5df8bd..b352146248 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html @@ -50,7 +50,6 @@ autocomplete="${email.autoComplete}" minlength="${email.minLength}" maxlength="${email.maxLength}" - aria-describedby="${email.id}__errormessage ${email.id}__longdescription ${email.id}__shortdescription" dir="auto"/>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html index 650c08639e..22502dc556 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html @@ -49,7 +49,6 @@ required="${file.required}" accept="${file.accept}" id="${file.id}_widget" - aria-describedby="${file.id}__errormessage ${file.id}__longdescription ${file.id}__shortdescription" type="file" data-cmp-data-layer="${file.data.json}" /> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html index b466cc152a..d1cf01778c 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html @@ -49,7 +49,6 @@ disabled="${!numberinput.enabled}" readonly="${numberinput.readOnly}" required="${numberinput.required}" - aria-describedby="${numberinput.id}__errormessage ${numberinput.id}__longdescription ${numberinput.id}__shortdescription" placeholder="${numberinput.placeHolder}" dir="auto"/>
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 7359b5bb50..a282ef4ca7 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 @@ -122,6 +122,12 @@ }); } + updateValidity(validity) { + const valid = validity.valid ? validity.valid : false; + let widgets = this.widget; + widgets.forEach(widget => widget.setAttribute(FormView.Constants.ARIA_INVALID, !valid)); + } + updateValue(modelValue) { this.widget.forEach(widget => { if (modelValue != null && widget.value != null && (modelValue.toString() == widget.value.toString())) { @@ -158,6 +164,7 @@ updateEnumNames(newEnumNames) { super.updateEnumNamesForRadioButtonAndCheckbox(newEnumNames, this.#createRadioOption) } + updateRequired(required, state) { if (this.widget) { this.element.toggleAttribute("required", required); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html index e0541d7c30..1535520d6e 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html @@ -37,7 +37,7 @@
-
+
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html index 3f8abdeffd..4565b72af5 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html @@ -48,7 +48,6 @@ aria-label="${switch.label.value}" disabled="${!switch.enabled || switch.readOnly}" value="${switch.default}" - aria-describedby="${switch.id}__errormessage ${switch.id}__longdescription ${switch.id}__shortdescription" aria-readonly="${switch.readOnly ? 'true' : ''}">
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html index 58692e79e6..3b04de89ce 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html @@ -48,7 +48,6 @@ required="${telText.required}" placeholder="${telText.placeHolder}" autocomplete="${telText.autoComplete}" - aria-describedby="${telText.id}__errormessage ${telText.id}__longdescription ${telText.id}__shortdescription" minlength="${telText.minLength}" maxlength="${telText.maxLength}" dir="auto"/> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/text/v1/text/text.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/text/v1/text/text.html index a30c3f3db0..292486590b 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/text/v1/text/text.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/text/v1/text/text.html @@ -18,7 +18,6 @@ data-sly-use.templates="core/wcm/components/commons/v1/templates.html" data-cmp-is="adaptiveFormText" id="${textModel.id}" - name="${textModel.name}" data-cmp-data-layer="${textModel.data.json}" data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}" data-cmp-visible="${textModel.visible}" diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html index 8a4b1f4611..9d0f76dc3c 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html @@ -63,7 +63,6 @@ required="${text.required}" placeholder="${text.placeHolder}" autocomplete="${text.autoComplete}" - aria-describedby="${text.id}__errormessage ${text.id}__longdescription ${text.id}__shortdescription" minlength="${text.minLength}" maxlength="${text.maxLength}" dir="auto"/> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/toggleablelink/v1/toggleablelink/widget.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/toggleablelink/v1/toggleablelink/widget.html index cff074917f..603b395347 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/toggleablelink/v1/toggleablelink/widget.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/toggleablelink/v1/toggleablelink/widget.html @@ -25,7 +25,6 @@ value="${checkboxgroup.enums[itemList.index].toString}" checked="${checkboxgroup.enums[itemList.index] in checkboxgroup.default }" disabled="${!checkboxgroup.enabled || checkboxgroup.readOnly}" - aria-describedby="${checkboxgroup.id}__errormessage ${checkboxgroup.id}__longdescription ${checkboxgroup.id}__shortdescription" aria-readonly="${checkboxgroup.readOnly ? 'true' : ''}"/> ${checkboxgroup.enumNames[itemList.index] @ context = 'html'} diff --git a/ui.frontend/src/utils.js b/ui.frontend/src/utils.js index 4e79628b25..95c5dd3789 100644 --- a/ui.frontend/src/utils.js +++ b/ui.frontend/src/utils.js @@ -233,24 +233,8 @@ class Utils { */ static updateId(htmlElement, oldId, newId) { let elementWithId = htmlElement.querySelectorAll("#" + oldId)[0]; - let errorElementWithId = htmlElement.querySelector("#" + `${oldId}__errormessage`); - let elementWithDescId = htmlElement.querySelector("#" + `${oldId}-widget`); - let elementWithShortDescId = htmlElement.querySelector("#" + `${oldId}__shortdescription`); - let elementWithLongDescId = htmlElement.querySelector("#" + `${oldId}__longdescription`); if (elementWithId) { elementWithId.id = newId; - }; - if (errorElementWithId) { - errorElementWithId.id = newId; - }; - if (elementWithDescId) { - elementWithDescId.id = newId; - }; - if (elementWithShortDescId) { - elementWithShortDescId.id = newId; - }; - if (elementWithLongDescId) { - elementWithLongDescId.id = newId; } } diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js index 1b34cdd427..ef6c9a8bc5 100644 --- a/ui.frontend/src/view/FormFieldBase.js +++ b/ui.frontend/src/view/FormFieldBase.js @@ -171,6 +171,37 @@ class FormFieldBase extends FormField { } } + + #syncError() { + let errorElement = typeof this.getErrorDiv === 'function' ? this.getErrorDiv() : null; + if (errorElement) { + errorElement.setAttribute('id', `${this.getId()}__errormessage`); + } + } + + #syncShortDesc() { + let shortDescElement = typeof this.getTooltipDiv === 'function' ? this.getTooltipDiv() : null; + if (shortDescElement) { + shortDescElement.setAttribute('id', `${this.getId()}__shortdescription`); + } + } + + #syncLongDesc() { + let longDescElement = typeof this.getDescription === 'function' ? this.getDescription() : null; + if (longDescElement) { + longDescElement.setAttribute('id', `${this.getId()}__longdescription`); + } + } + + #syncAriaDescribedBy() { + let widgetElement = typeof this.getWidget === 'function' ? this.getWidget() : null; + let widgetElements = typeof this.getWidgets === 'function' ? this.getWidgets() : null; + widgetElement = widgetElements || widgetElement; + if (widgetElement) { + widgetElement.setAttribute('aria-describedby', `${this.getId()}__errormessage ${this.getId()}__shortdescription ${this.getId()}__longdescription`); + } + } + /** * Synchronizes the markup with the model. * @method @@ -178,6 +209,10 @@ class FormFieldBase extends FormField { syncMarkupWithModel() { this.#syncLabel() this.#syncWidget() + this.#syncShortDesc() + this. #syncLongDesc() + this.#syncAriaDescribedBy() + this.#syncError() } /** @@ -435,8 +470,8 @@ class FormFieldBase extends FormField { // todo: handle the type of validity if required later const valid = validity.valid; if (this.errorDiv) { - this.toggle(valid, Constants.ARIA_INVALID, true); this.element.setAttribute(Constants.DATA_ATTRIBUTE_VALID, valid); + this.widget.setAttribute(Constants.ARIA_INVALID, !valid); this.updateValidationMessage(state.validationMessage, state); } } diff --git a/ui.frontend/src/view/FormOptionFieldBase.js b/ui.frontend/src/view/FormOptionFieldBase.js index 43bac2a3e6..9006f32bba 100644 --- a/ui.frontend/src/view/FormOptionFieldBase.js +++ b/ui.frontend/src/view/FormOptionFieldBase.js @@ -62,8 +62,6 @@ class FormOptionFieldBase extends FormFieldBase { } } - - /** * Common method to update the enums Names of checkbox and radiobutton * @param {Array} newEnumsNames - updated enum Names values diff --git a/ui.tests/test-module/specs/actions/setFocus/setFocus.runtime.spec.js b/ui.tests/test-module/specs/actions/setFocus/setFocus.runtime.spec.js index 26454d5ef4..b7a695980f 100644 --- a/ui.tests/test-module/specs/actions/setFocus/setFocus.runtime.spec.js +++ b/ui.tests/test-module/specs/actions/setFocus/setFocus.runtime.spec.js @@ -33,7 +33,7 @@ describe("SetFocus Test", () => { }); }); cy.get(focusTnC).click().then(() => { - cy.get('[name="consenttext"]').should('have.attr', 'data-cmp-active', 'true'); + cy.get('[data-cmp-is="adaptiveFormText"]').should('have.attr', 'data-cmp-active', 'true'); }) }); diff --git a/ui.tests/test-module/specs/checkbox/checkbox.runtime.spec.js b/ui.tests/test-module/specs/checkbox/checkbox.runtime.spec.js index 496ae9f74f..214809db93 100644 --- a/ui.tests/test-module/specs/checkbox/checkbox.runtime.spec.js +++ b/ui.tests/test-module/specs/checkbox/checkbox.runtime.spec.js @@ -124,7 +124,8 @@ describe("Form Runtime with CheckBox Input", () => { cy.get(`#${id}`).find("input").click().then(x => { cy.get(`#${id}`).find(".cmp-adaptiveform-checkbox__errormessage").should('have.text',"This is a custom required checkbox") cy.get(`#${id} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${id}__errormessage`) - cy.get(`#${id} > .${bemBlock}__widget-container > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__longdescription ${id}__shortdescription`) + cy.get(`#${id} > .${bemBlock}__widget-container > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__shortdescription ${id}__longdescription`) + cy.get(`#${id} > .${bemBlock}__widget-container > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true') }) cy.get(`#${id}`).find("input").click().then(x => { diff --git a/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.spec.js b/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.spec.js index e7db896471..8cc90ce402 100644 --- a/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.spec.js +++ b/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.spec.js @@ -157,11 +157,13 @@ describe("Form Runtime with CheckBoxGroup Input", () => { cy.get(`#${checkBox3}`).find("input").uncheck().check(["0"]).blur().then(x => { cy.get(`#${checkBox5}`).find("input").uncheck().check(["1"]) cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"Please enter a valid value.") + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('have.attr', 'aria-describedby', `${checkBox5}__errormessage ${checkBox5}__shortdescription ${checkBox5}__longdescription`) }) cy.get(`#${checkBox3}`).find("input").uncheck().check(["0"]).blur().then(x => { cy.get(`#${checkBox5}`).find("input").uncheck().check(["0"]) cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"") + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__option__widget").should('have.attr', 'aria-invalid', 'false'); }) }) diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js index 7bf44bdbeb..9e442b0f39 100644 --- a/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js +++ b/ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js @@ -143,7 +143,8 @@ describe("Form Runtime with Date Picker", () => { cy.get(`#${datePicker4}`).find("input").clear().type(incorrectInput).blur().then(x => { cy.get(`#${datePicker4}`).find(".cmp-adaptiveform-datepicker__errormessage").should('have.text',"Please enter a valid value.") cy.get(`#${datePicker4} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${datePicker4}__errormessage`) - cy.get(`#${datePicker4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${datePicker4}__errormessage ${datePicker4}__longdescription ${datePicker4}__shortdescription`) + cy.get(`#${datePicker4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${datePicker4}__errormessage ${datePicker4}__shortdescription ${datePicker4}__longdescription`) + cy.get(`#${datePicker4} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true') }) cy.get(`#${datePicker4}`).find("input").clear().type(correctInput).blur().then(x => { diff --git a/ui.tests/test-module/specs/dropdown/dropdown.runtime.spec.js b/ui.tests/test-module/specs/dropdown/dropdown.runtime.spec.js index 6d5bf37f9f..c7b2840c54 100644 --- a/ui.tests/test-module/specs/dropdown/dropdown.runtime.spec.js +++ b/ui.tests/test-module/specs/dropdown/dropdown.runtime.spec.js @@ -185,7 +185,8 @@ describe("Form with Dropdown", () => { cy.get(`#${dropdown6} select`).select("beans") cy.get(`#${dropdown6}`).find(".cmp-adaptiveform-dropdown__errormessage").should('have.text',"Please enter a valid value.") cy.get(`#${dropdown6} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${dropdown6}__errormessage`) - cy.get(`#${dropdown6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${dropdown6}__errormessage ${dropdown6}__longdescription ${dropdown6}__shortdescription`) + cy.get(`#${dropdown6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${dropdown6}__errormessage ${dropdown6}__shortdescription ${dropdown6}__longdescription`) + cy.get(`#${dropdown6} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true') cy.get(`#${dropdown6} select`).select("carrot") cy.get(`#${dropdown6}`).find(".cmp-adaptiveform-dropdown__errormessage").should('have.text',"") diff --git a/ui.tests/test-module/specs/emailinput/emailinput.runtime.spec.js b/ui.tests/test-module/specs/emailinput/emailinput.runtime.spec.js index 9e38b0ae90..713341f431 100644 --- a/ui.tests/test-module/specs/emailinput/emailinput.runtime.spec.js +++ b/ui.tests/test-module/specs/emailinput/emailinput.runtime.spec.js @@ -94,7 +94,8 @@ describe("Form Runtime with Email Input", () => { cy.get(`#${id}`).find("input").clear().type(notAllowed).blur().then(x => { cy.get('.cmp-adaptiveform-emailinput__errormessage').should('be.visible'); cy.get(`#${id} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${id}__errormessage`); - cy.get(`#${id} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__longdescription ${id}__shortdescription`); + cy.get(`#${id} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__shortdescription ${id}__longdescription`); + cy.get(`#${id} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true'); }) const invalidEmailPattern = "invalidEmail@domain" cy.get(`#${id}`).find("input").clear().type(invalidEmailPattern).blur().then(x => { diff --git a/ui.tests/test-module/specs/fileinput/fileinput.runtime.spec.js b/ui.tests/test-module/specs/fileinput/fileinput.runtime.spec.js index 8949994d8b..6f7344ca11 100644 --- a/ui.tests/test-module/specs/fileinput/fileinput.runtime.spec.js +++ b/ui.tests/test-module/specs/fileinput/fileinput.runtime.spec.js @@ -143,6 +143,7 @@ describe("Form with File Input - Basic Tests", () => { let expectedFileName = Array.isArray(model.getState().value) ? model.getState().value[0].name : model.getState().value.name; expect(expectedFileName).to.equal(fileName) cy.get(`#${id}`).should('have.class', 'cmp-adaptiveform-fileinput--filled'); + cy.get(`#${id}`).find(".cmp-adaptiveform-fileinput__widget").should('have.attr', 'aria-invalid', 'false'); }) } } diff --git a/ui.tests/test-module/specs/numberinput/numberinput.runtime.spec.js b/ui.tests/test-module/specs/numberinput/numberinput.runtime.spec.js index 0ea9407dd8..8ca7c249ba 100644 --- a/ui.tests/test-module/specs/numberinput/numberinput.runtime.spec.js +++ b/ui.tests/test-module/specs/numberinput/numberinput.runtime.spec.js @@ -166,7 +166,8 @@ describe("Form with Number Input", () => { cy.get(`#${numberInput4}`).find("input").clear().type(incorrectInput).blur().then(x => { cy.get(`#${numberInput4}`).find(".cmp-adaptiveform-numberinput__errormessage").should('have.text',"Please enter a valid value.") cy.get(`#${numberInput4} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${numberInput4}__errormessage`) - cy.get(`#${numberInput4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${numberInput4}__errormessage ${numberInput4}__longdescription ${numberInput4}__shortdescription`) + cy.get(`#${numberInput4} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${numberInput4}__errormessage ${numberInput4}__shortdescription ${numberInput4}__longdescription`) + cy.get(`#${numberInput4} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true') }) cy.get(`#${numberInput4}`).find("input").clear().type(correctInput).blur().then(x => { diff --git a/ui.tests/test-module/specs/panelcontainer/panelcontainer.runtime.spec.js b/ui.tests/test-module/specs/panelcontainer/panelcontainer.runtime.spec.js index 8fcafaa7ed..d9ee06b9a1 100644 --- a/ui.tests/test-module/specs/panelcontainer/panelcontainer.runtime.spec.js +++ b/ui.tests/test-module/specs/panelcontainer/panelcontainer.runtime.spec.js @@ -302,6 +302,12 @@ describe( "Form Runtime with Panel Container - Repeatability Tests", () => { const repeatabilityCount = 2; const checkNonDuplicateIDs = (root, instance) => { + const rootAriaDescribedby = root.getAttribute('aria-describedby'); + const instanceAriaDescribedby = instance.getAttribute('aria-describedby'); + if (rootAriaDescribedby && !exceptionIDsList.includes(rootAriaDescribedby)) { + expect(rootAriaDescribedby).to.not.equal(instanceAriaDescribedby, 'aria-describedby IDs should be different'); // redundant but good for debugging as this will show up in the UI + return rootAriaDescribedby !== instanceAriaDescribedby; + } if(root?.id !== '' && !(exceptionIDsList.includes(root.id))) { expect(root?.id).to.not.equal(instance?.id, `Ids generated should be different`) // redundant but good for debugging as this will show up in the UI return root?.id !== instance?.id; diff --git a/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.spec.js b/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.spec.js index d877cb15d2..b77090026f 100644 --- a/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.spec.js +++ b/ui.tests/test-module/specs/radiobutton/radiobutton.runtime.spec.js @@ -98,11 +98,12 @@ describe("Form with Radio Button Input", () => { formContainer._model.validate(); cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__errormessage").should('have.text',"This is a required radiobutton"); cy.get(`#${id} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${id}__errormessage`); - // cy.get(`#${id} > .${bemBlock}__option__widget`).should('have.attr', 'aria-describedby'); - cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__option__widget").should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__longdescription ${id}__shortdescription`); + cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__widget").should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__shortdescription ${id}__longdescription`); + cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__option__widget").should('have.attr', 'aria-invalid', 'true'); cy.get(`#${id}`).find("input").eq(1).click().then(x => { cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__errormessage").should('have.text',""); + cy.get(`#${id}`).find(".cmp-adaptiveform-radiobutton__option__widget").should('have.attr', 'aria-invalid', 'false'); }); }); diff --git a/ui.tests/test-module/specs/switch/switch.runtime.spec.js b/ui.tests/test-module/specs/switch/switch.runtime.spec.js index 3adce9571b..62e9204eb1 100644 --- a/ui.tests/test-module/specs/switch/switch.runtime.spec.js +++ b/ui.tests/test-module/specs/switch/switch.runtime.spec.js @@ -120,7 +120,8 @@ describe("Form Runtime with Switch Input", () => { cy.get(`#${id}`).find("input").click().then(x => { cy.get(`#${id}`).find(".cmp-adaptiveform-switch__errormessage").should('have.text',"This is a custom required switch"); cy.get(`#${id} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${id}__errormessage`); - cy.get(`#${id} > .${bemBlock}__container > .${bemBlock}__widget-label > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__longdescription ${id}__shortdescription`); + cy.get(`#${id} > .${bemBlock}__container > .${bemBlock}__widget-label > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${id}__errormessage ${id}__shortdescription ${id}__longdescription`); + cy.get(`#${id} > .${bemBlock}__container > .${bemBlock}__widget-label > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true'); }) cy.get(`#${id}`).find("input").click().then(x => { diff --git a/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.spec.js b/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.spec.js index ef5287f284..a32b75c9df 100644 --- a/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.spec.js +++ b/ui.tests/test-module/specs/telephoneinput/telephoneinput.runtime.spec.js @@ -118,7 +118,8 @@ describe("Form Runtime with Telephone Input", () => { // cy.get(`.${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${telephoneInput6}__errormessage`); cy.get(`#${telephoneInput6} > div.${bemBlock}__errormessage`).should('have.text', 'Please match the format requested.'); cy.get(`#${telephoneInput6} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${telephoneInput6}__errormessage`); - cy.get(`#${telephoneInput6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${telephoneInput6}__errormessage ${telephoneInput6}__longdescription ${telephoneInput6}__shortdescription`); + cy.get(`#${telephoneInput6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${telephoneInput6}__errormessage ${telephoneInput6}__shortdescription ${telephoneInput6}__longdescription`); + cy.get(`#${telephoneInput6} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true'); }) // Validating UK pattern const [telephoneInput7, fieldView1] = Object.entries(formContainer._fields)[6]; diff --git a/ui.tests/test-module/specs/textinput/textinput.runtime.spec.js b/ui.tests/test-module/specs/textinput/textinput.runtime.spec.js index a25da2faf4..99fff1b4b4 100644 --- a/ui.tests/test-module/specs/textinput/textinput.runtime.spec.js +++ b/ui.tests/test-module/specs/textinput/textinput.runtime.spec.js @@ -180,7 +180,8 @@ describe("Form Runtime with Text Input", () => { cy.get(`#${textbox6}`).find("input").clear().type("'").blur().then(x => { cy.get(`#${textbox6}`).find(".cmp-adaptiveform-textinput__errormessage").should('have.text',"Please match the format requested.") cy.get(`#${textbox6} > div.${bemBlock}__errormessage`).should('have.attr', 'id', `${textbox6}__errormessage`); - cy.get(`#${textbox6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${textbox6}__errormessage ${textbox6}__longdescription ${textbox6}__shortdescription`); + cy.get(`#${textbox6} > .${bemBlock}__widget`).should('have.attr', 'aria-describedby', `${textbox6}__errormessage ${textbox6}__shortdescription ${textbox6}__longdescription`); + cy.get(`#${textbox6} > .${bemBlock}__widget`).should('have.attr', 'aria-invalid', 'true'); }) // 3. Maximum Number of Characters: 20