Accessibility changes in the deposit form

Author: Fatimah

src/lib/forms/ArrayField.js

@@ -110,13 +110,13 @@ export class ArrayField extends Component {
           );
         })}
 
-        <label className="helptext">{helpText}</label>
+      {helpText && <label className="helptext">{helpText}</label>}
 
         <Form.Group>
           <Form.Button
             type="button"
             icon
-            className="align-self-end"
+            className="align-self-end mt-15"
             labelPosition="left"
             onClick={() => {
               arrayHelpers.push({
@@ -140,6 +140,7 @@ export class ArrayField extends Component {
       <FieldArray
         className="invenio-array-field"
         name={fieldPath}
+        id={fieldPath}
         component={this.renderFormField}
       />
     );

src/lib/forms/RemoteSelectField.js

@@ -212,6 +212,9 @@ export class RemoteSelectField extends Component {
         options={suggestions}
         noResultsMessage={this.getNoResultsMessage()}
         search={compProps.search}
+        searchInput={{
+          id: compProps.fieldPath,
+        }}
         lazyLoad
         open={open}
         onClose={this.onClose}

src/lib/forms/SelectField.js

@@ -67,8 +67,7 @@ export class SelectField extends Component {
           // otherwise it would be displayed despite updating the fieldu
           (initialValue === value && getIn(initialErrors, fieldPath, null))
         }
-        id={fieldPath}
-        label={{ children: label, htmlFor: fieldPath }}
+        label={{ children: label}}
         name={fieldPath}
         onBlur={handleBlur}
         onChange={(event, data) => {

src/lib/forms/TextField.js

@@ -45,6 +45,7 @@ export class TextField extends Component {
                 disabled={disabled}
                 fluid
                 label={label}
+                id={fieldPath}
                 required={required}
                 {...uiProps}
               />

src/lib/forms/widgets/select/Dropdown.js

@@ -32,8 +32,12 @@ export default class Dropdown extends Component {
           label={<FieldLabel htmlFor={fieldPath} icon={icon} label={label} />}
           options={this.serializeOptions(options)}
           search={search}
+          aria-label={label}
           multiple={multiple}
-          placeholder={placeholder}
+          placeholder={{
+            role: "option",
+            content: placeholder,
+          }}
           clearable={clearable}
           required={required}
           optimized