♿ [open-formulieren/open-forms#4716] Limiting accessibility changes f…

…or most components to only non-multiple instances #717 (comment)
open-formulieren · Oct 23, 2024 · 1e86055 · 1e86055
1 parent 34b136f
commit 1e86055
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
   }