🚸 [#4269] Cleanup and improve a11y

Use the existing VariableSelection component to render a dropdown of available Open Forms variables. Added an accessible label to the dropdowns in the mapping tables.
open-formulieren · May 8, 2024 · f7121f5 · f7121f5
1 parent a2c8131
commit f7121f5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNParametersForm.js
@@ -1,6 +1,6 @@
 import {parseExpression} from 'feelin';
 import {useFormikContext} from 'formik';
-import React, {useContext, useState} from 'react';
+import React, {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useAsync} from 'react-use';
 

diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/VariableMapping.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/VariableMapping.js
@@ -7,6 +7,7 @@ import DeleteIcon from 'components/admin/DeleteIcon';
 import ButtonContainer from 'components/admin/forms/ButtonContainer';
 import Field from 'components/admin/forms/Field';
 import Select from 'components/admin/forms/Select';
+import VariableSelection from 'components/admin/forms/VariableSelection';
 
 const VariableMapping = ({loading, mappingName, formVariables, dmnVariables}) => {
   const intl = useIntl();
@@ -48,11 +49,13 @@ const VariableMapping = ({loading, mappingName, formVariables, dmnVariables}) =>
                       name={`${mappingName}.${index}.formVariable`}
                       htmlFor={`${mappingName}.${index}.formVariable`}
                     >
-                      <Select
+                      <VariableSelection
                         id={`${mappingName}.${index}.formVariable`}
-                        allowBlank
-                        choices={formVariables}
                         {...getFieldProps(`${mappingName}.${index}.formVariable`)}
+                        aria-label={intl.formatMessage({
+                          description: 'Accessible label for (form) variable dropdown',
+                          defaultMessage: 'Form variable',
+                        })}
                       />
                     </Field>
                   </td>
@@ -67,6 +70,10 @@ const VariableMapping = ({loading, mappingName, formVariables, dmnVariables}) =>
                         disabled={loading}
                         choices={dmnVariables}
                         {...getFieldProps(`${mappingName}.${index}.dmnVariable`)}
+                        aria-label={intl.formatMessage({
+                          description: 'Accessible label for DMN variable dropdown',
+                          defaultMessage: 'DMN variable',
+                        })}
                       />
                     </Field>
                   </td>

diff --git a/src/openforms/js/components/admin/forms/VariableSelection.js b/src/openforms/js/components/admin/forms/VariableSelection.js
@@ -14,11 +14,12 @@ const VariableSelection = ({
   onChange,
   includeStaticVariables = false,
   filter = allowAny,
+  ...props
 }) => {
   const {formSteps, formVariables, staticVariables} = useContext(FormContext);
 
   let formDefinitionsNames = {};
-  formSteps.map(step => {
+  formSteps.forEach(step => {
     formDefinitionsNames[step.formDefinition || step._generatedId] = step.internalName || step.name;
   });
 
@@ -36,7 +37,15 @@ const VariableSelection = ({
     /*TODO: This should be a searchable select for when there are a billion variables -> react-select */
   }
   return (
-    <Select id={id} name={name} choices={choices} allowBlank onChange={onChange} value={value} />
+    <Select
+      id={id}
+      name={name}
+      choices={choices}
+      allowBlank
+      onChange={onChange}
+      value={value}
+      {...props}
+    />
   );
 };