feat(a11y): porting of volto-form-block autocomplete changes (#779)

* feat: porting of volto-form-block autocomplete changes

* fix: minor fixes

Author: sabrina-bongiovanni

src/components/TextInput.jsx

@@ -17,6 +17,7 @@ export default function TextInput(props) {
     groupClassName,
     ...otherProps
   } = props;
+
   const [isFocused, setIsFocused] = useState(false);
 
   const toggleFocusLabel = () => {

src/customizations/volto-form-block/components/Field.jsx

@@ -64,6 +64,7 @@ const Field = ({
   errorMessage,
   id,
   reactSelect,
+  autocomplete,
 }) => {
   const intl = useIntl();
   const Select = reactSelect.default;
@@ -102,6 +103,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'textarea' && (
@@ -120,6 +122,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? undefined}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'select' && (
@@ -151,6 +154,7 @@ const Field = ({
               classNamePrefix="react-select"
               className={isInvalid() ? 'is-invalid' : ''}
               value={value ? [{ value: value, label: value }] : []}
+              autoComplete={autocomplete}
             />
             {description && <small className="form-text">{description}</small>}
             {errorMessage && (
@@ -286,6 +290,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'attachment' && (
@@ -320,6 +325,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'static_text' &&
@@ -382,6 +388,7 @@ Field.propTypes = {
   value: PropTypes.any,
   formHasErrors: PropTypes.bool,
   onChange: PropTypes.func,
+  autoComplete: PropTypes.string,
 };
 
 export default injectLazyLibs('reactSelect')(Field);