From c1196abc0d5e0ddafbe03e2340afa18065ad2af3 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Thu, 10 Oct 2024 15:47:38 +0200 Subject: [PATCH] :wheelchair: [open-formulieren/open-forms#4716] Limiting accessibility changes for most components to only non-multiple instances https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 --- src/formio/components/DateField.js | 7 ++++++- src/formio/components/DateTimeField.js | 10 ++++++++-- src/formio/components/Email.js | 6 +++++- src/formio/components/FileField.js | 2 +- src/formio/components/IBANField.js | 6 +++++- src/formio/components/Number.js | 6 +++++- src/formio/components/Password.js | 6 +++++- src/formio/components/PhoneNumberField.js | 6 +++++- src/formio/components/TextArea.js | 6 +++++- src/formio/components/TextField.js | 6 +++++- src/formio/components/TimeField.js | 6 +++++- 11 files changed, 55 insertions(+), 12 deletions(-) diff --git a/src/formio/components/DateField.js b/src/formio/components/DateField.js index 174c7f6a8..e34510cc7 100644 --- a/src/formio/components/DateField.js +++ b/src/formio/components/DateField.js @@ -45,7 +45,12 @@ class DateField extends DateTimeField { setErrorClasses(elements, dirty, hasErrors, hasMessages) { const inputClone = this.element.querySelector('input:not([type="hidden"])'); const targetElements = inputClone ? [inputClone] : []; - setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/DateTimeField.js b/src/formio/components/DateTimeField.js index 41e7235f3..2a961f452 100644 --- a/src/formio/components/DateTimeField.js +++ b/src/formio/components/DateTimeField.js @@ -30,8 +30,14 @@ class DateTimeField extends DateTimeFormio { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - const targetElements = [this.element.querySelector('input:not([type="hidden"])')]; - setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + const inputClone = this.element.querySelector('input:not([type="hidden"])'); + const targetElements = inputClone ? [inputClone] : []; + + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/Email.js b/src/formio/components/Email.js index bc0418daa..cb0652790 100644 --- a/src/formio/components/Email.js +++ b/src/formio/components/Email.js @@ -19,7 +19,11 @@ class Email extends Formio.Components.components.email { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/FileField.js b/src/formio/components/FileField.js index fc6d61bed..536714a0c 100644 --- a/src/formio/components/FileField.js +++ b/src/formio/components/FileField.js @@ -292,7 +292,7 @@ class FileField extends Formio.Components.components.file { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - const input = this.element.querySelector('[ref="fileBrowse"]'); + const input = this.refs.fileBrowse; const targetElements = input ? [input] : []; setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages); diff --git a/src/formio/components/IBANField.js b/src/formio/components/IBANField.js index deae9a422..f24a61414 100644 --- a/src/formio/components/IBANField.js +++ b/src/formio/components/IBANField.js @@ -53,7 +53,11 @@ export default class IBANField extends TextField { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } } diff --git a/src/formio/components/Number.js b/src/formio/components/Number.js index 2dd3f9279..3afb24135 100644 --- a/src/formio/components/Number.js +++ b/src/formio/components/Number.js @@ -34,7 +34,11 @@ class Number extends Formio.Components.components.number { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/Password.js b/src/formio/components/Password.js index 965bdf6fb..7e35cd13e 100644 --- a/src/formio/components/Password.js +++ b/src/formio/components/Password.js @@ -20,7 +20,11 @@ class Password extends Formio.Components.components.password { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } } diff --git a/src/formio/components/PhoneNumberField.js b/src/formio/components/PhoneNumberField.js index e2fccd4b7..09e30df9e 100644 --- a/src/formio/components/PhoneNumberField.js +++ b/src/formio/components/PhoneNumberField.js @@ -46,7 +46,11 @@ class PhoneNumberField extends PhoneNumber { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/TextArea.js b/src/formio/components/TextArea.js index 580cf849a..6a18d9753 100644 --- a/src/formio/components/TextArea.js +++ b/src/formio/components/TextArea.js @@ -18,7 +18,11 @@ class TextArea extends Formio.Components.components.textarea { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/TextField.js b/src/formio/components/TextField.js index 26e3f3d2b..2b7805c2b 100644 --- a/src/formio/components/TextField.js +++ b/src/formio/components/TextField.js @@ -39,7 +39,11 @@ class TextField extends Formio.Components.components.textfield { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/TimeField.js b/src/formio/components/TimeField.js index a4cdbf73b..0a7e0fce3 100644 --- a/src/formio/components/TimeField.js +++ b/src/formio/components/TimeField.js @@ -33,7 +33,11 @@ class TimeField extends Time { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + // setErrorAttributes cannot be done for a `multiple` component + // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 + if (!this.component.multiple) { + setErrorAttributes(elements, hasErrors, hasMessages, this.element); + } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); }