Merge pull request #6796 from tchak/refactor-champs-hidden-fields

a11y(champs): fix champs labels and descriptions
2022-01-05 17:12:46 +01:00 · 2022-01-05 17:12:46 +01:00 · 7eddbd5238
commit 7eddbd5238
parent 5f179676c8 cb66348916
64 changed files with 673 additions and 617 deletions
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@ -317,7 +317,7 @@
    list-style: none;
  }

-  [data-reach-combobox-token] {
+  [data-reach-combobox-token] button {
    border: solid 1px $border-grey;
    color: $black;
    border-radius: 4px;
@ -328,14 +328,9 @@
    align-items: center;
  }

-  [data-reach-combobox-token]:focus {
+  [data-reach-combobox-token] button:focus {
    background-color: $black;
    color: $white;
-
-    [data-combobox-remove-token] {
-      background-color: $black;
-      color: $white;
-    }
  }

  .editable-champ {
@ -493,13 +488,13 @@
  }
 }

-[data-react-class]:not([data-react-class="ComboMultipleDropdownList"]) {
+[data-react-class]:not([data-react-class^="ComboMultiple"]) {
  [data-reach-combobox-input]:not(.no-margin) {
    margin-bottom: $default-fields-spacer;
  }
 }

-[data-react-class="ComboMultipleDropdownList"] {
+[data-react-class^="ComboMultiple"] {
  margin-bottom: $default-fields-spacer;

  [data-reach-combobox-input] {
@ -516,7 +511,7 @@
  }
 }

-[data-combobox-token-label] {
+[data-reach-combobox-token-label] {
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  display: flex;
@ -533,14 +528,14 @@
  color: $white;
 }

-[data-combobox-separator] {
+[data-reach-combobox-separator] {
  font-size: 16px;
  color: $dark-grey;
  background: $light-grey;
  padding: $default-spacer;
 }

-[data-combobox-remove-token] {
+[data-reach-combobox-token] button {
  cursor: pointer;
  background-color: transparent;
  background-image: none;
@ -552,7 +547,7 @@
  align-items: center !important;
 }

-[data-reach-combobox-input]:focus {
+[data-reach-combobox-input] button:focus {
  outline-color: $light-blue;
 }

--- a/app/assets/stylesheets/personnes_impliquees.scss
+++ b/app/assets/stylesheets/personnes_impliquees.scss
@ -9,7 +9,7 @@
    margin-left: 16px;
  }

-  [data-react-class="ComboMultipleDropdownList"] {
+  [data-react-class^="ComboMultiple"] {
    margin-bottom: $default-fields-spacer;

    [data-reach-combobox-token-list] {
@ -17,7 +17,7 @@
      display: flex;
    }

-    [data-reach-combobox-token] {
+    [data-reach-combobox-token] button {
      border: solid 1px $border-grey;
      color: $black;
      margin-top: 0.5 * $default-padding;
@ -29,7 +29,7 @@
      list-style: none;
    }

-    [data-reach-combobox-token]:focus {
+    [data-reach-combobox-token] button:focus {
      background-color: $black;
      color: $white;
    }
--- a/app/assets/stylesheets/procedure_show.scss
+++ b/app/assets/stylesheets/procedure_show.scss
@ -62,7 +62,7 @@
    text-align: center;
  }

-  [data-react-class="ComboMultipleDropdownList"] {
+  [data-react-class^="ComboMultiple"] {
    margin-bottom: $default-fields-spacer;

    [data-reach-combobox-token-list] {
@ -71,7 +71,7 @@
      width: 100%;
    }

-    [data-reach-combobox-token] {
+    [data-reach-combobox-token] button {
      border: solid 1px $border-grey;
      color: $black;
      margin: 0.25 * $default-padding;
@ -83,14 +83,9 @@
      align-items: center;
    }

-    [data-reach-combobox-token]:focus {
+    [data-reach-combobox-token] button:focus {
      background-color: $black;
      color: $white;
-
-      [data-combobox-remove-token] {
-        background-color: $black;
-        color: $white;
-      }
    }


--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -50,7 +50,7 @@ module ApplicationHelper
  end

  def render_champ(champ)
-    champ_selector = ".editable-champ[data-champ-id=\"#{champ.id}\"]"
+    champ_selector = "##{champ.input_group_id}"
    form_html = render 'shared/dossiers/edit', dossier: champ.dossier, apercu: false
    champ_html = Nokogiri::HTML.fragment(form_html).at_css(champ_selector).to_s
    # rubocop:disable Rails/OutputSafety
--- a/app/helpers/champ_helper.rb
+++ b/app/helpers/champ_helper.rb
@ -20,12 +20,6 @@ module ChampHelper
    simple_format(auto_linked_text, {}, sanitize: false)
  end

-  def describedby_id(champ)
-    if champ.description.present?
-      "desc-#{champ.type_de_champ.id}-#{champ.row}"
-    end
-  end
-
  def auto_attach_url(form, object)
    if object.is_a?(Champ) && object.persisted? && object.public?
      champs_piece_justificative_url(object.id)
--- a/app/javascript/components/ComboAdresseSearch.jsx
+++ b/app/javascript/components/ComboAdresseSearch.jsx
@ -6,42 +6,29 @@ import ComboSearch from './ComboSearch';
 import { queryClient } from './shared/queryClient';

 function ComboAdresseSearch({
-  mandatory,
-  placeholder,
-  hiddenFieldId,
-  onChange,
  transformResult = ({ properties: { label } }) => [label, label],
  allowInputValues = true,
-  className
+  ...props
 }) {
  const transformResults = useCallback((_, { features }) => features);

  return (
    <QueryClientProvider client={queryClient}>
      <ComboSearch
-        className={className}
-        placeholder={placeholder}
-        required={mandatory}
-        hiddenFieldId={hiddenFieldId}
-        onChange={onChange}
        allowInputValues={allowInputValues}
        scope="adresse"
        minimumInputLength={2}
        transformResult={transformResult}
        transformResults={transformResults}
+        {...props}
      />
    </QueryClientProvider>
  );
 }

 ComboAdresseSearch.propTypes = {
-  className: PropTypes.string,
-  placeholder: PropTypes.string,
-  mandatory: PropTypes.bool,
-  hiddenFieldId: PropTypes.string,
  transformResult: PropTypes.func,
-  allowInputValues: PropTypes.bool,
-  onChange: PropTypes.func
+  allowInputValues: PropTypes.bool
 };

 export default ComboAdresseSearch;
--- a/app/javascript/components/ComboAnnuaireEducationSearch.jsx
+++ b/app/javascript/components/ComboAnnuaireEducationSearch.jsx
@ -4,12 +4,10 @@ import { QueryClientProvider } from 'react-query';
 import ComboSearch from './ComboSearch';
 import { queryClient } from './shared/queryClient';

-function ComboAnnuaireEducationSearch(params) {
+function ComboAnnuaireEducationSearch(props) {
  return (
    <QueryClientProvider client={queryClient}>
      <ComboSearch
-        required={params.mandatory}
-        hiddenFieldId={params.hiddenFieldId}
        scope="annuaire-education"
        minimumInputLength={3}
        transformResults={(_, { records }) => records}
@ -20,6 +18,7 @@ function ComboAnnuaireEducationSearch(params) {
            nom_commune
          }
        }) => [id, `${nom_etablissement}, ${nom_commune} (${id})`]}
+        {...props}
      />
    </QueryClientProvider>
  );
--- a/app/javascript/components/ComboCommunesSearch.jsx
+++ b/app/javascript/components/ComboCommunesSearch.jsx
@ -1,10 +1,12 @@
-import React, { useState, useMemo } from 'react';
+import React from 'react';
 import { QueryClientProvider } from 'react-query';
 import { matchSorter } from 'match-sorter';
+import PropTypes from 'prop-types';

 import ComboSearch from './ComboSearch';
 import { queryClient } from './shared/queryClient';
 import { ComboDepartementsSearch } from './ComboDepartementsSearch';
+import { useHiddenField, groupId } from './shared/hooks';

 // Avoid hiding similar matches for precise queries (like "Sainte Marie")
 function searchResultsLimit(term) {
@ -48,34 +50,18 @@ const [placeholderDepartement, placeholderCommune] =
    Math.floor(Math.random() * (placeholderDepartements.length - 1))
  ];

-function ComboCommunesSearch(params) {
-  const hiddenDepartementFieldId = `${params.hiddenFieldId}:departement`;
-  const hiddenDepartementField = useMemo(
-    () =>
-      document.querySelector(`input[data-attr="${hiddenDepartementFieldId}"]`),
-    [params.hiddenFieldId]
+function ComboCommunesSearch({ id, ...props }) {
+  const group = groupId(id);
+  const [departementValue, setDepartementValue] = useHiddenField(
+    group,
+    'departement'
  );
-  const hiddenCodeDepartementField = useMemo(
-    () =>
-      document.querySelector(
-        `input[data-attr="${params.hiddenFieldId}:code_departement"]`
-      ),
-    [params.hiddenFieldId]
+  const [codeDepartement, setCodeDepartement] = useHiddenField(
+    group,
+    'code_departement'
  );
-  const inputId = useMemo(
-    () =>
-      document.querySelector(`input[data-uuid="${params.hiddenFieldId}"]`)?.id,
-    [params.hiddenFieldId]
-  );
-  const [departementCode, setDepartementCode] = useState(
-    () => hiddenCodeDepartementField?.value
-  );
-  const departementValue = useMemo(
-    () => hiddenDepartementField?.value,
-    [hiddenDepartementField]
-  );
-  const departementDescribedBy = `${inputId}_departement_notice`;
-  const communeDescribedBy = `${inputId}_commune_notice`;
+  const departementDescribedBy = `${id}_departement_notice`;
+  const communeDescribedBy = `${id}_commune_notice`;

  return (
    <QueryClientProvider client={queryClient}>
@ -87,22 +73,19 @@ function ComboCommunesSearch(params) {
          </p>
        </div>
        <ComboDepartementsSearch
-          value={departementValue}
-          inputId={!departementCode ? inputId : null}
-          aria-describedby={departementDescribedBy}
+          {...props}
+          id={!codeDepartement ? id : null}
+          describedby={departementDescribedBy}
          placeholder={placeholderDepartement}
          addForeignDepartement={false}
-          required={params.mandatory}
+          value={departementValue}
          onChange={(_, result) => {
-            setDepartementCode(result?.code);
-            if (hiddenDepartementField && hiddenCodeDepartementField) {
-              hiddenDepartementField.setAttribute('value', result?.nom);
-              hiddenCodeDepartementField.setAttribute('value', result?.code);
-            }
+            setDepartementValue(result?.nom);
+            setCodeDepartement(result?.code);
          }}
        />
      </div>
-      {departementCode ? (
+      {codeDepartement ? (
        <div>
          <div className="notice" id={communeDescribedBy}>
            <p>
@ -111,14 +94,12 @@ function ComboCommunesSearch(params) {
            </p>
          </div>
          <ComboSearch
-            autoFocus
-            inputId={inputId}
-            aria-describedby={communeDescribedBy}
+            {...props}
+            id={id}
+            describedby={communeDescribedBy}
            placeholder={placeholderCommune}
-            required={params.mandatory}
-            hiddenFieldId={params.hiddenFieldId}
            scope="communes"
-            scopeExtra={departementCode}
+            scopeExtra={codeDepartement}
            minimumInputLength={2}
            transformResult={({ code, nom, codesPostaux }) => [
              code,
@ -132,4 +113,8 @@ function ComboCommunesSearch(params) {
  );
 }

+ComboCommunesSearch.propTypes = {
+  id: PropTypes.string
+};
+
 export default ComboCommunesSearch;
--- a/app/javascript/components/ComboDepartementsSearch.jsx
+++ b/app/javascript/components/ComboDepartementsSearch.jsx
@ -19,11 +19,11 @@ function expandResultsWithForeignDepartement(term, results) {

 export function ComboDepartementsSearch({
  addForeignDepartement = true,
-  ...params
+  ...props
 }) {
  return (
    <ComboSearch
-      {...params}
+      {...props}
      scope="departements"
      minimumInputLength={1}
      transformResult={({ code, nom }) => [code, `${code} - ${nom}`]}
@ -37,10 +37,7 @@ export function ComboDepartementsSearch({
 function ComboDepartementsSearchDefault(params) {
  return (
    <QueryClientProvider client={queryClient}>
-      <ComboDepartementsSearch
-        required={params.mandatory}
-        hiddenFieldId={params.hiddenFieldId}
-      />
+      <ComboDepartementsSearch {...params} />
    </QueryClientProvider>
  );
 }
--- a/app/javascript/components/ComboMultiple.jsx
+++ b/app/javascript/components/ComboMultiple.jsx
@ -0,0 +1,314 @@
+import React, {
+  useMemo,
+  useState,
+  useRef,
+  useContext,
+  createContext,
+  useEffect,
+  useLayoutEffect
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxList,
+  ComboboxOption,
+  ComboboxPopover
+} from '@reach/combobox';
+import { useId } from '@reach/auto-id';
+import '@reach/combobox/styles.css';
+import { matchSorter } from 'match-sorter';
+import { XIcon } from '@heroicons/react/outline';
+import isHotkey from 'is-hotkey';
+import invariant from 'tiny-invariant';
+
+import { useDeferredSubmit, useHiddenField } from './shared/hooks';
+
+const Context = createContext();
+
+function ComboMultiple({
+  options,
+  id,
+  labelledby,
+  describedby,
+  label,
+  group,
+  name = 'value',
+  selected,
+  acceptNewValues = false
+}) {
+  invariant(id || label, 'ComboMultiple: `id` or a `label` are required');
+  invariant(group, 'ComboMultiple: `group` is required');
+
+  if (!Array.isArray(options[0])) {
+    options = options.filter((o) => o).map((o) => [o, o]);
+  }
+  const inputRef = useRef();
+  const [term, setTerm] = useState('');
+  const [selections, setSelections] = useState(selected);
+  const [newValues, setNewValues] = useState([]);
+  const inputId = useId(id);
+  const removedLabelledby = `${inputId}-remove`;
+  const selectedLabelledby = `${inputId}-selected`;
+
+  const optionValueByLabel = (label) => {
+    const maybeOption = newValues.includes(label)
+      ? [label, label]
+      : options.find(([optionLabel]) => optionLabel == label);
+    return maybeOption ? maybeOption[1] : undefined;
+  };
+  const optionLabelByValue = (value) => {
+    const maybeOption = newValues.includes(value)
+      ? [value, value]
+      : options.find(([, optionValue]) => optionValue == value);
+    return maybeOption ? maybeOption[0] : undefined;
+  };
+
+  const extraOptions = useMemo(
+    () =>
+      acceptNewValues && term && term.length > 2 && !optionLabelByValue(term)
+        ? [[term, term]]
+        : [],
+    [acceptNewValues, term, newValues.join(',')]
+  );
+  const results = useMemo(
+    () =>
+      [
+        ...extraOptions,
+        ...(term
+          ? matchSorter(
+              options.filter(([label]) => !label.startsWith('--')),
+              term
+            )
+          : options)
+      ].filter(([, value]) => !selections.includes(value)),
+    [term, selections.join(','), newValues.join(',')]
+  );
+  const [, setHiddenFieldValue, hiddenField] = useHiddenField(group, name);
+  const awaitFormSubmit = useDeferredSubmit(hiddenField);
+
+  const handleChange = (event) => {
+    setTerm(event.target.value);
+  };
+
+  const saveSelection = (fn) => {
+    setSelections((selections) => {
+      selections = fn(selections);
+      setHiddenFieldValue(JSON.stringify(selections));
+      return selections;
+    });
+  };
+
+  const onSelect = (value) => {
+    const maybeValue = [...extraOptions, ...options].find(
+      ([val]) => val == value
+    );
+    const selectedValue = maybeValue && maybeValue[1];
+    if (selectedValue) {
+      if (
+        acceptNewValues &&
+        extraOptions[0] &&
+        extraOptions[0][0] == selectedValue
+      ) {
+        setNewValues((newValues) => [...newValues, selectedValue]);
+      }
+      saveSelection((selections) => [...selections, selectedValue]);
+    }
+    setTerm('');
+    awaitFormSubmit.done();
+  };
+
+  const onRemove = (label) => {
+    const optionValue = optionValueByLabel(label);
+    if (optionValue) {
+      saveSelection((selections) =>
+        selections.filter((value) => value != optionValue)
+      );
+      setNewValues((newValues) =>
+        newValues.filter((value) => value != optionValue)
+      );
+    }
+    inputRef.current.focus();
+  };
+
+  const onKeyDown = (event) => {
+    if (
+      isHotkey('enter', event) ||
+      isHotkey(' ', event) ||
+      isHotkey(',', event) ||
+      isHotkey(';', event)
+    ) {
+      if (
+        term &&
+        [...extraOptions, ...options].map(([label]) => label).includes(term)
+      ) {
+        event.preventDefault();
+        onSelect(term);
+      }
+    }
+  };
+
+  const onBlur = () => {
+    if (
+      term &&
+      [...extraOptions, ...options].map(([label]) => label).includes(term)
+    ) {
+      awaitFormSubmit(() => {
+        onSelect(term);
+      });
+    }
+  };
+
+  return (
+    <Combobox openOnFocus={true} onSelect={onSelect}>
+      <ComboboxTokenLabel onRemove={onRemove}>
+        <span id={removedLabelledby} className="hidden">
+          désélectionner
+        </span>
+        <ul
+          id={selectedLabelledby}
+          aria-live="polite"
+          aria-atomic={true}
+          data-reach-combobox-token-list
+        >
+          {selections.map((selection) => (
+            <ComboboxToken
+              key={selection}
+              describedby={removedLabelledby}
+              value={optionLabelByValue(selection)}
+            />
+          ))}
+        </ul>
+        <ComboboxInput
+          ref={inputRef}
+          value={term}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          onBlur={onBlur}
+          autocomplete={false}
+          id={inputId}
+          aria-label={label}
+          aria-labelledby={[labelledby, selectedLabelledby]
+            .filter(Boolean)
+            .join(' ')}
+          aria-describedby={describedby}
+        />
+      </ComboboxTokenLabel>
+      {results && (results.length > 0 || !acceptNewValues) && (
+        <ComboboxPopover className="shadow-popup">
+          {results.length === 0 && (
+            <p>
+              Aucun résultat{' '}
+              <button onClick={() => setTerm('')}>Effacer</button>
+            </p>
+          )}
+          <ComboboxList>
+            {results.map(([label, value], index) => {
+              if (label.startsWith('--')) {
+                return <ComboboxSeparator key={index} value={label} />;
+              }
+              return (
+                <ComboboxOption
+                  key={index}
+                  value={label}
+                  data-option-value={value}
+                />
+              );
+            })}
+          </ComboboxList>
+        </ComboboxPopover>
+      )}
+    </Combobox>
+  );
+}
+
+function ComboboxTokenLabel({ onRemove, ...props }) {
+  const selectionsRef = useRef([]);
+
+  useLayoutEffect(() => {
+    selectionsRef.current = [];
+    return () => (selectionsRef.current = []);
+  });
+
+  const context = {
+    onRemove,
+    selectionsRef
+  };
+
+  return (
+    <Context.Provider value={context}>
+      <div data-reach-combobox-token-label {...props} />
+    </Context.Provider>
+  );
+}
+
+ComboboxTokenLabel.propTypes = {
+  onRemove: PropTypes.func
+};
+
+function ComboboxSeparator({ value }) {
+  return (
+    <li aria-disabled="true" role="option" data-reach-combobox-separator>
+      {value.slice(2, -2)}
+    </li>
+  );
+}
+
+ComboboxSeparator.propTypes = {
+  value: PropTypes.string
+};
+
+function ComboboxToken({ value, describedby, ...props }) {
+  const { selectionsRef, onRemove } = useContext(Context);
+  useEffect(() => {
+    selectionsRef.current.push(value);
+  });
+
+  return (
+    <li data-reach-combobox-token {...props}>
+      <button
+        type="button"
+        onClick={() => {
+          onRemove(value);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Backspace') {
+            onRemove(value);
+          }
+        }}
+        aria-describedby={describedby}
+      >
+        <XIcon className="icon-size mr-1" aria-hidden="true" />
+        {value}
+      </button>
+    </li>
+  );
+}
+
+ComboboxToken.propTypes = {
+  value: PropTypes.string,
+  describedby: PropTypes.string
+};
+
+ComboMultiple.propTypes = {
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(
+      PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+      )
+    )
+  ]),
+  selected: PropTypes.arrayOf(PropTypes.string),
+  arraySelected: PropTypes.arrayOf(PropTypes.array),
+  acceptNewValues: PropTypes.bool,
+  mandatory: PropTypes.bool,
+  id: PropTypes.string,
+  group: PropTypes.string,
+  name: PropTypes.string,
+  labelledby: PropTypes.string,
+  describedby: PropTypes.string,
+  label: PropTypes.string
+};
+
+export default ComboMultiple;
--- a/app/javascript/components/ComboMultipleDropdownList.jsx
+++ b/app/javascript/components/ComboMultipleDropdownList.jsx
@ -1,302 +1,15 @@
-import React, {
-  useMemo,
-  useState,
-  useRef,
-  useContext,
-  createContext,
-  useEffect,
-  useLayoutEffect
-} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxList,
-  ComboboxOption,
-  ComboboxPopover
-} from '@reach/combobox';
-import '@reach/combobox/styles.css';
-import { matchSorter } from 'match-sorter';
-import { fire } from '@utils';
-import { XIcon } from '@heroicons/react/outline';
-import isHotkey from 'is-hotkey';

-import { useDeferredSubmit } from './shared/hooks';
+import { groupId } from './shared/hooks';
+import ComboMultiple from './ComboMultiple';

-const Context = createContext();
-
-function ComboMultipleDropdownList({
-  options,
-  hiddenFieldId,
-  selected,
-  label,
-  acceptNewValues = false
-}) {
-  if (label == undefined) {
-    label = 'Choisir une option';
-  }
-  if (!Array.isArray(options[0])) {
-    options = options.filter((o) => o).map((o) => [o, o]);
-  }
-  const inputRef = useRef();
-  const [term, setTerm] = useState('');
-  const [selections, setSelections] = useState(selected);
-  const [newValues, setNewValues] = useState([]);
-
-  const optionValueByLabel = (label) => {
-    const maybeOption = newValues.includes(label)
-      ? [label, label]
-      : options.find(([optionLabel]) => optionLabel == label);
-    return maybeOption ? maybeOption[1] : undefined;
-  };
-  const optionLabelByValue = (value) => {
-    const maybeOption = newValues.includes(value)
-      ? [value, value]
-      : options.find(([, optionValue]) => optionValue == value);
-    return maybeOption ? maybeOption[0] : undefined;
-  };
-
-  const extraOptions = useMemo(
-    () =>
-      acceptNewValues && term && term.length > 2 && !optionLabelByValue(term)
-        ? [[term, term]]
-        : [],
-    [acceptNewValues, term, newValues.join(',')]
-  );
-  const results = useMemo(
-    () =>
-      [
-        ...extraOptions,
-        ...(term
-          ? matchSorter(
-              options.filter(([label]) => !label.startsWith('--')),
-              term
-            )
-          : options)
-      ].filter(([, value]) => !selections.includes(value)),
-    [term, selections.join(','), newValues.join(',')]
-  );
-  const hiddenField = useMemo(
-    () => document.querySelector(`input[data-uuid="${hiddenFieldId}"]`),
-    [hiddenFieldId]
-  );
-  const awaitFormSubmit = useDeferredSubmit(hiddenField);
-
-  const handleChange = (event) => {
-    setTerm(event.target.value);
-  };
-
-  const saveSelection = (fn) => {
-    setSelections((selections) => {
-      selections = fn(selections);
-      if (hiddenField) {
-        hiddenField.setAttribute('value', JSON.stringify(selections));
-        fire(hiddenField, 'autosave:trigger');
-      }
-      return selections;
-    });
-  };
-
-  const onSelect = (value) => {
-    const maybeValue = [...extraOptions, ...options].find(
-      ([val]) => val == value
-    );
-    const selectedValue = maybeValue && maybeValue[1];
-    if (selectedValue) {
-      if (
-        acceptNewValues &&
-        extraOptions[0] &&
-        extraOptions[0][0] == selectedValue
-      ) {
-        setNewValues((newValues) => [...newValues, selectedValue]);
-      }
-      saveSelection((selections) => [...selections, selectedValue]);
-    }
-    setTerm('');
-    awaitFormSubmit.done();
-  };
-
-  const onRemove = (label) => {
-    const optionValue = optionValueByLabel(label);
-    if (optionValue) {
-      saveSelection((selections) =>
-        selections.filter((value) => value != optionValue)
-      );
-      setNewValues((newValues) =>
-        newValues.filter((value) => value != optionValue)
-      );
-    }
-    inputRef.current.focus();
-  };
-
-  const onKeyDown = (event) => {
-    if (
-      isHotkey('enter', event) ||
-      isHotkey(' ', event) ||
-      isHotkey(',', event) ||
-      isHotkey(';', event)
-    ) {
-      if (
-        term &&
-        [...extraOptions, ...options].map(([label]) => label).includes(term)
-      ) {
-        event.preventDefault();
-        onSelect(term);
-      }
-    }
-  };
-
-  const onBlur = () => {
-    if (
-      term &&
-      [...extraOptions, ...options].map(([label]) => label).includes(term)
-    ) {
-      awaitFormSubmit(() => {
-        onSelect(term);
-      });
-    }
-  };
-
-  return (
-    <Combobox openOnFocus={true} onSelect={onSelect} aria-label={label}>
-      <ComboboxTokenLabel onRemove={onRemove}>
-        <ul
-          aria-live="polite"
-          aria-atomic={true}
-          data-reach-combobox-token-list
-        >
-          {selections.map((selection) => (
-            <ComboboxToken
-              key={selection}
-              value={optionLabelByValue(selection)}
-            />
-          ))}
-        </ul>
-        <ComboboxInput
-          ref={inputRef}
-          value={term}
-          onChange={handleChange}
-          onKeyDown={onKeyDown}
-          onBlur={onBlur}
-          autocomplete={false}
-        />
-      </ComboboxTokenLabel>
-      {results && (results.length > 0 || !acceptNewValues) && (
-        <ComboboxPopover className="shadow-popup">
-          {results.length === 0 && (
-            <p>
-              Aucun résultat{' '}
-              <button onClick={() => setTerm('')}>Effacer</button>
-            </p>
-          )}
-          <ComboboxList>
-            {results.map(([label, value], index) => {
-              if (label.startsWith('--')) {
-                return <ComboboxSeparator key={index} value={label} />;
-              }
-              return (
-                <ComboboxOption
-                  key={index}
-                  value={label}
-                  data-option-value={value}
-                />
-              );
-            })}
-          </ComboboxList>
-        </ComboboxPopover>
-      )}
-    </Combobox>
-  );
+function ComboMultipleDropdownList({ id, ...props }) {
+  return <ComboMultiple group={groupId(id)} id={id} {...props} />;
 }

-function ComboboxTokenLabel({ onRemove, ...props }) {
-  const selectionsRef = useRef([]);
-
-  useLayoutEffect(() => {
-    selectionsRef.current = [];
-    return () => (selectionsRef.current = []);
-  });
-
-  const context = {
-    onRemove,
-    selectionsRef
-  };
-
-  return (
-    <Context.Provider value={context}>
-      <div data-combobox-token-label {...props} />
-    </Context.Provider>
-  );
-}
-
-ComboboxTokenLabel.propTypes = {
-  onRemove: PropTypes.func
-};
-
-function ComboboxSeparator({ value }) {
-  return (
-    <li aria-disabled="true" role="option" data-combobox-separator>
-      {value.slice(2, -2)}
-    </li>
-  );
-}
-
-ComboboxSeparator.propTypes = {
-  value: PropTypes.string
-};
-
-function ComboboxToken({ value, ...props }) {
-  const { selectionsRef, onRemove } = useContext(Context);
-  useEffect(() => {
-    selectionsRef.current.push(value);
-  });
-
-  return (
-    <li
-      data-reach-combobox-token
-      tabIndex="0"
-      onKeyDown={(event) => {
-        if (event.key === 'Backspace') {
-          onRemove(value);
-        }
-      }}
-      {...props}
-    >
-      <button
-        type="button"
-        tabIndex={-1}
-        data-combobox-remove-token
-        onClick={() => {
-          onRemove(value);
-        }}
-      >
-        <XIcon className="icon-size" />
-        <span className="screen-reader-text">Désélectionner</span>
-      </button>
-      {value}
-    </li>
-  );
-}
-
-ComboboxToken.propTypes = {
-  value: PropTypes.string,
-  label: PropTypes.string
-};
-
 ComboMultipleDropdownList.propTypes = {
-  options: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.arrayOf(
-      PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-      )
-    )
-  ]),
-  hiddenFieldId: PropTypes.string,
-  selected: PropTypes.arrayOf(PropTypes.string),
-  arraySelected: PropTypes.arrayOf(PropTypes.array),
-  label: PropTypes.string,
-  acceptNewValues: PropTypes.bool
+  id: PropTypes.string
 };

 export default ComboMultipleDropdownList;
--- a/app/javascript/components/ComboPaysSearch.jsx
+++ b/app/javascript/components/ComboPaysSearch.jsx
@ -4,15 +4,14 @@ import { QueryClientProvider } from 'react-query';
 import ComboSearch from './ComboSearch';
 import { queryClient } from './shared/queryClient';

-function ComboPaysSearch(params) {
+function ComboPaysSearch(props) {
  return (
    <QueryClientProvider client={queryClient}>
      <ComboSearch
-        required={params.mandatory}
-        hiddenFieldId={params.hiddenFieldId}
        scope="pays"
        minimumInputLength={0}
        transformResult={({ code, value, label }) => [code, value, label]}
+        {...props}
      />
    </QueryClientProvider>
  );
--- a/app/javascript/components/ComboRegionsSearch.jsx
+++ b/app/javascript/components/ComboRegionsSearch.jsx
@ -4,15 +4,14 @@ import { QueryClientProvider } from 'react-query';
 import ComboSearch from './ComboSearch';
 import { queryClient } from './shared/queryClient';

-function ComboRegionsSearch(params) {
+function ComboRegionsSearch(props) {
  return (
    <QueryClientProvider client={queryClient}>
      <ComboSearch
-        required={params.mandatory}
-        hiddenFieldId={params.hiddenFieldId}
        scope="regions"
        minimumInputLength={0}
        transformResult={({ code, nom }) => [code, nom]}
+        {...props}
      />
    </QueryClientProvider>
  );
--- a/app/javascript/components/ComboSearch.jsx
+++ b/app/javascript/components/ComboSearch.jsx
@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useMemo,
-  useCallback,
-  useRef,
-  useEffect
-} from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { useDebounce } from 'use-debounce';
 import { useQuery } from 'react-query';
 import PropTypes from 'prop-types';
@ -16,42 +10,33 @@ import {
  ComboboxOption
 } from '@reach/combobox';
 import '@reach/combobox/styles.css';
-import { fire } from '@utils';
+import invariant from 'tiny-invariant';

-import { useDeferredSubmit } from './shared/hooks';
+import { useDeferredSubmit, useHiddenField, groupId } from './shared/hooks';

 function defaultTransformResults(_, results) {
  return results;
 }

 function ComboSearch({
-  hiddenFieldId,
  onChange,
+  value: controlledValue,
  scope,
-  inputId,
  scopeExtra,
  minimumInputLength,
  transformResult,
  allowInputValues = false,
  transformResults = defaultTransformResults,
+  id,
+  describedby,
  ...props
 }) {
-  const hiddenValueField = useMemo(
-    () => document.querySelector(`input[data-uuid="${hiddenFieldId}"]`),
-    [hiddenFieldId]
-  );
-  const comboInputId = useMemo(
-    () => hiddenValueField?.id || inputId,
-    [inputId, hiddenValueField]
-  );
-  const hiddenIdField = useMemo(
-    () =>
-      document.querySelector(
-        `input[data-uuid="${hiddenFieldId}"] + input[data-reference]`
-      ),
-    [hiddenFieldId]
-  );
-  const initialValue = hiddenValueField ? hiddenValueField.value : props.value;
+  invariant(id || onChange, 'ComboSearch: `id` or `onChange` are required');
+
+  const group = !onChange ? groupId(id) : null;
+  const [externalValue, setExternalValue, hiddenField] = useHiddenField(group);
+  const [, setExternalId] = useHiddenField(group, 'external_id');
+  const initialValue = externalValue ? externalValue : controlledValue;
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedSearchTerm] = useDebounce(searchTerm, 300);
  const [value, setValue] = useState(initialValue);
@ -60,41 +45,26 @@ function ComboSearch({
    const [, value, label] = transformResult(result);
    return label ?? value;
  };
-  const setExternalValue = useCallback(
-    (value) => {
-      if (hiddenValueField) {
-        hiddenValueField.setAttribute('value', value);
-        fire(hiddenValueField, 'autosave:trigger');
-      }
-    },
-    [hiddenValueField]
-  );
-  const setExternalId = useCallback(
-    (key) => {
-      if (hiddenIdField) {
-        hiddenIdField.setAttribute('value', key);
-      }
-    },
-    [hiddenIdField]
-  );
  const setExternalValueAndId = useCallback((label) => {
    const { key, value, result } = resultsMap.current[label];
-    setExternalId(key);
-    setExternalValue(value);
    if (onChange) {
      onChange(value, result);
+    } else {
+      setExternalId(key);
+      setExternalValue(value);
    }
  }, []);
-  const awaitFormSubmit = useDeferredSubmit(hiddenValueField);
+  const awaitFormSubmit = useDeferredSubmit(hiddenField);

  const handleOnChange = useCallback(
    ({ target: { value } }) => {
      setValue(value);
      if (!value) {
-        setExternalId('');
-        setExternalValue('');
        if (onChange) {
          onChange(null);
+        } else {
+          setExternalId('');
+          setExternalValue('');
        }
      } else if (value.length >= minimumInputLength) {
        setSearchTerm(value.trim());
@ -133,20 +103,16 @@ function ComboSearch({
    }
  }, [data]);

-  useEffect(() => {
-    document
-      .querySelector(`#${comboInputId}[type="hidden"]`)
-      ?.removeAttribute('id');
-  }, [comboInputId]);
-
  return (
    <Combobox onSelect={handleOnSelect}>
      <ComboboxInput
        {...props}
-        id={comboInputId}
        onChange={handleOnChange}
        onBlur={onBlur}
        value={value}
+        autocomplete={false}
+        id={id}
+        aria-describedby={describedby}
      />
      {isSuccess && (
        <ComboboxPopover className="shadow-popup">
@ -178,15 +144,16 @@ function ComboSearch({

 ComboSearch.propTypes = {
  value: PropTypes.string,
-  hiddenFieldId: PropTypes.string,
  scope: PropTypes.string,
  minimumInputLength: PropTypes.number,
  transformResult: PropTypes.func,
  transformResults: PropTypes.func,
  allowInputValues: PropTypes.bool,
  onChange: PropTypes.func,
-  inputId: PropTypes.string,
-  scopeExtra: PropTypes.string
+  scopeExtra: PropTypes.string,
+  mandatory: PropTypes.bool,
+  id: PropTypes.string,
+  describedby: PropTypes.string
 };

 export default ComboSearch;
--- a/app/javascript/components/shared/hooks.js
+++ b/app/javascript/components/shared/hooks.js
@ -1,4 +1,5 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useMemo, useState } from 'react';
+import { fire } from '@utils';

 export function useDeferredSubmit(input) {
  const calledRef = useRef(false);
@ -31,3 +32,35 @@ export function useDeferredSubmit(input) {
  };
  return awaitFormSubmit;
 }
+
+export function groupId(id) {
+  return `#champ-${id.replace(/-input$/, '')}`;
+}
+
+export function useHiddenField(group, name = 'value') {
+  const hiddenField = useMemo(
+    () => selectInputInGroup(group, name),
+    [group, name]
+  );
+  const [value, setValue] = useState(() => hiddenField?.value);
+
+  return [
+    value,
+    (value) => {
+      if (hiddenField) {
+        hiddenField.setAttribute('value', value);
+        setValue(value);
+        fire(hiddenField, 'autosave:trigger');
+      }
+    },
+    hiddenField
+  ];
+}
+
+function selectInputInGroup(group, name) {
+  if (group) {
+    return document.querySelector(
+      `${group} input[type="hidden"][name$="[${name}]"], ${group} input[type="hidden"][name="${name}"]`
+    );
+  }
+}
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@ -69,6 +69,7 @@ registerReactComponents({
  ComboMultipleDropdownList: Loadable(() =>
    import('../components/ComboMultipleDropdownList')
  ),
+  ComboMultiple: Loadable(() => import('../components/ComboMultiple')),
  ComboPaysSearch: Loadable(() => import('../components/ComboPaysSearch')),
  ComboRegionsSearch: Loadable(() =>
    import('../components/ComboRegionsSearch')
--- a/app/models/champ.rb
+++ b/app/models/champ.rb
@ -139,6 +139,22 @@ class Champ < ApplicationRecord
    true
  end

+  def input_group_id
+    "champ-#{html_id}"
+  end
+
+  def input_id
+    "#{html_id}-input"
+  end
+
+  def labelledby_id
+    "#{html_id}-label"
+  end
+
+  def describedby_id
+    "#{html_id}-description" if description.present?
+  end
+
  def stable_id
    type_de_champ.stable_id
  end
@ -159,6 +175,10 @@ class Champ < ApplicationRecord

  private

+  def html_id
+    "#{stable_id}-#{id}"
+  end
+
  def needs_dossier_id?
    !dossier_id && parent_id
  end
--- a/app/views/administrateurs/experts_procedures/index.html.haml
+++ b/app/views/administrateurs/experts_procedures/index.html.haml
@ -44,14 +44,15 @@

            .instructeur-wrapper
              %p.notice Pendant l'instruction d’un dossier, les instructeurs peuvent demander leur avis à un ou plusieurs experts.
-              %p.notice Entrez les adresses email des experts que vous souhaitez affecter à cette démarche
-              - hidden_field_id = SecureRandom.uuid
-              = hidden_field_tag :emails, nil, data: { uuid: hidden_field_id }
-              = react_component("ComboMultipleDropdownList",
+              %p#experts-emails.notice Entrez les adresses email des experts que vous souhaitez affecter à cette démarche
+              = hidden_field_tag :emails, nil
+              = react_component("ComboMultiple",
                options: [],
                selected: [], disabled: [],
-                hiddenFieldId: hidden_field_id,
-                label: 'email expert',
+                group: '.instructeur-wrapper',
+                name: 'emails',
+                label: 'Emails',
+                describedby: 'experts-emails',
                acceptNewValues: true)

              = f.submit 'Affecter à la démarche', class: 'button primary send'
--- a/app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml
@ -5,12 +5,12 @@
    .instructeur-wrapper
      - if !procedure.routee?
        %p.notice Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
-      - hidden_field_id = SecureRandom.uuid
-      = hidden_field_tag :emails, nil, data: { uuid: hidden_field_id }
-      = react_component("ComboMultipleDropdownList",
+      = hidden_field_tag :emails, nil
+      = react_component("ComboMultiple",
        options: available_instructeur_emails, selected: [], disabled: [],
-        hiddenFieldId: hidden_field_id,
-        label: 'email instructeur',
+        group: '.instructeur-wrapper',
+        name: 'emails',
+        label: 'Emails',
        acceptNewValues: true)

      = f.submit 'Affecter', class: 'button primary send'
--- a/app/views/experts/shared/avis/_form.html.haml
+++ b/app/views/experts/shared/avis/_form.html.haml
@ -4,13 +4,12 @@
    %p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.

    = form_for avis, url: url, html: { class: 'form', data: { persisted_content_id: "expert-ask-avis-for-dossier-#{@avis.dossier.id}" } } do |f|
-      - hidden_field_id = SecureRandom.uuid
-      = hidden_field_tag  'avis[emails]', nil, data: { uuid: hidden_field_id }
-      = react_component("ComboMultipleDropdownList",
-          options: [],
-          selected: [], disabled: [],
-          hiddenFieldId: hidden_field_id,
-          label: 'avis_emails',
+      = hidden_field_tag  'avis[emails]', nil
+      = react_component("ComboMultiple",
+          options: [], selected: [], disabled: [],
+          group: '.ask-avis',
+          name: 'emails',
+          label: 'Emails',
          acceptNewValues: true)
      = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true, class: 'persisted-input'
      %p.tab-title Ajouter une pièce jointe
--- a/app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml
+++ b/app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml
@ -8,8 +8,12 @@
    Le destinataire suivra automatiquement le dossier
  = form_for dossier, url: send_to_instructeurs_instructeur_dossier_path(dossier.procedure, dossier), method: :post, html: { class: 'form recipients-form' } do |f|
    .flex.justify-start.align-start
-      - hidden_field_id = SecureRandom.uuid
-      = hidden_field_tag :recipients, nil, data: { uuid: hidden_field_id }
-      = react_component("ComboMultipleDropdownList", options: potential_recipients.map{|r| [r.email, r.id]}, selected: [], disabled: [], hiddenFieldId: hidden_field_id, label: "email instructeur")
+      = hidden_field_tag :recipients, nil
+      = react_component("ComboMultiple",
+        options: potential_recipients.map{|r| [r.email, r.id]},
+        selected: [], disabled: [],
+        group: '.recipients-form',
+        name: 'recipients',
+        label: 'Emails')

      = f.submit "Envoyer", class: "button large send gap-left"
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@ -96,9 +96,14 @@
                  Personnaliser
                #custom-menu.dropdown-content.fade-in-down
                  = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form large columns-form' do
-                    - hidden_field_id = SecureRandom.uuid
-                    = hidden_field_tag :values, nil, data: { uuid: hidden_field_id }
-                    = react_component("ComboMultipleDropdownList", options: @displayed_fields_options, selected: @displayed_fields_selected, disabled: [], hiddenFieldId: hidden_field_id, label: 'colonne')
+                    = hidden_field_tag :values, nil
+                    = react_component("ComboMultiple",
+                      options: @displayed_fields_options,
+                      selected: @displayed_fields_selected,
+                      disabled: [],
+                      label: 'Colonne à afficher',
+                      group: '.columns-form',
+                      name: 'values')

                    = submit_tag "Enregistrer", class: 'button'

--- a/app/views/instructeurs/shared/avis/_form.html.haml
+++ b/app/views/instructeurs/shared/avis/_form.html.haml
@ -2,20 +2,21 @@
  %h1.tab-title Inviter des personnes à donner leur avis
  %p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.
  - if @dossier.procedure.experts_require_administrateur_invitation
-    %p.avis-notice Choisissez des experts à qui vous souhaitez demander un avis parmi la liste prédéfinie par les administrateurs de la démarche
+    %p#avis-emails-description.avis-notice
+      Choisissez des experts à qui vous souhaitez demander un avis parmi la liste prédéfinie par les administrateurs de la démarche
  - else
-    %p.avis-notice Entrez les adresses email des experts à qui vous souhaitez demander un avis
+    %p#avis-emails-description.avis-notice
+      Entrez les adresses email des experts à qui vous souhaitez demander un avis

  = form_for avis, url: url, html: { class: 'form', data: { persisted_content_id: "instructeur-ask-avis-for-dossier-#{@dossier.id}" } } do |f|
-    - hidden_field_id = SecureRandom.uuid
-    = hidden_field_tag  'avis[emails]', nil, data: { uuid: hidden_field_id }
-    = react_component("ComboMultipleDropdownList",
+    = hidden_field_tag  'avis[emails]', nil
+    = react_component("ComboMultiple",
        options: @dossier.procedure.experts_require_administrateur_invitation ? @experts_emails : [],
-        selected: [],
-        disabled: [],
-        hiddenFieldId: hidden_field_id,
-        label: 'avis_emails',
-        id: 'avis_emails',
+        selected: [], disabled: [],
+        label: 'Emails',
+        group: '.ask-avis',
+        name: 'emails',
+        describedby: 'avis-emails-description',
        acceptNewValues: !@dossier.procedure.experts_require_administrateur_invitation)
    = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true, class: "persisted-input"
    %p.tab-title Ajouter une pièce jointe
--- a/app/views/shared/attachment/_edit.html.haml
+++ b/app/views/shared/attachment/_edit.html.haml
@ -6,6 +6,7 @@
 - accept = defined?(accept) ? accept : nil
 - user_can_destroy = defined?(user_can_destroy) ? user_can_destroy : false
 - direct_upload = direct_upload != nil ? false : true
+- champ = form.object.is_a?(Champ) ? form.object : nil

 .attachment
  - if defined?(template) && template.attached?
@ -36,4 +37,6 @@
    class: "attachment-input attachment-input-#{attachment_id} #{'hidden' if persisted}",
    accept: accept,
    direct_upload: direct_upload,
+    id: champ&.input_id,
+    aria: { describedby: champ&.describedby_id },
    data: { 'auto-attach-url': auto_attach_url(form, form.object) }
--- a/app/views/shared/dossiers/editable_champs/_address.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_address.html.haml
@ -1,4 +1,6 @@
- hidden_field_id = SecureRandom.uuid
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
-= form.hidden_field :external_id, { data: { reference: true } }
-= react_component("ComboAdresseSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+= form.hidden_field :value
+= form.hidden_field :external_id
+= react_component("ComboAdresseSearch",
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)
--- a/app/views/shared/dossiers/editable_champs/_annuaire_education.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_annuaire_education.html.haml
@ -1,4 +1,6 @@
- hidden_field_id = SecureRandom.uuid
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
-= form.hidden_field :external_id, { data: { reference: true } }
-= react_component("ComboAnnuaireEducationSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id )
+= form.hidden_field :value
+= form.hidden_field :external_id
+= react_component("ComboAnnuaireEducationSearch",
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)
--- a/app/views/shared/dossiers/editable_champs/_champ_label.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_champ_label.html.haml
@ -1,10 +1,10 @@
 = # we do this trick because some html elements should use 'label' and some should be plain paragraphs
 - if champ.html_label?
-  = form.label champ.main_value_name do
+  = form.label champ.main_value_name, id: champ.labelledby_id, for: champ.input_id do
    = render partial: 'shared/dossiers/editable_champs/champ_label_content', locals: { champ: champ, seen_at: seen_at }
 - else
  .form-label.mb-4
    = render partial: 'shared/dossiers/editable_champs/champ_label_content', locals: { champ: champ, seen_at: seen_at }

 - if champ.description.present?
-  .notice{ id: describedby_id(champ) }= string_to_html(champ.description)
+  .notice{ id: champ.describedby_id }= string_to_html(champ.description)
--- a/app/views/shared/dossiers/editable_champs/_checkbox.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_checkbox.html.haml
@ -1,4 +1,4 @@
 = form.check_box :value,
-  { required: champ.mandatory? },
+  { required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id } },
  'on',
  'off'
--- a/app/views/shared/dossiers/editable_champs/_cnaf.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_cnaf.html.haml
@ -5,7 +5,7 @@
    = form.text_field :numero_allocataire,
      required: champ.mandatory?,
      size: 7,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }

  %div
    = form.label :code_postal, t('.code_postal_label')
@ -13,4 +13,4 @@
    = form.text_field :code_postal,
      size: 5,
      required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }
--- a/app/views/shared/dossiers/editable_champs/_communes.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_communes.html.haml
@ -1,6 +1,8 @@
- hidden_field_id = SecureRandom.uuid
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
-= form.hidden_field :external_id, { data: { reference: true } }
-= form.hidden_field :departement, { data: { attr: "#{hidden_field_id}:departement" } }
-= form.hidden_field :code_departement, { data: { attr: "#{hidden_field_id}:code_departement" } }
-= react_component("ComboCommunesSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+= form.hidden_field :value
+= form.hidden_field :external_id
+= form.hidden_field :departement
+= form.hidden_field :code_departement
+= react_component("ComboCommunesSearch",
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)
--- a/app/views/shared/dossiers/editable_champs/_date.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_date.html.haml
@ -1,4 +1,6 @@
 = form.date_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  value: champ.value,
  required: champ.mandatory?,
  placeholder: 'aaaa-mm-jj'
--- a/app/views/shared/dossiers/editable_champs/_datetime.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_datetime.html.haml
@ -1,4 +1,4 @@
 - parsed_value = champ.value.present? ? Time.zone.parse(champ.value) : nil

 .datetime
-  = form.datetime_select(:value, selected: parsed_value, start_year: datetime_start_year(parsed_value), end_year: Date.today.year + 50, minute_step: 5, include_blank: true)
+  = form.datetime_select(:value, id: champ.input_id, aria: { describedby: champ.describedby_id }, selected: parsed_value, start_year: datetime_start_year(parsed_value), end_year: Date.today.year + 50, minute_step: 5, include_blank: true)
--- a/app/views/shared/dossiers/editable_champs/_decimal_number.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_decimal_number.html.haml
@ -1,4 +1,6 @@
 = form.number_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  step: :any,
  placeholder: champ.libelle,
  required: champ.mandatory?
--- a/app/views/shared/dossiers/editable_champs/_departements.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_departements.html.haml
@ -1,4 +1,6 @@
- hidden_field_id = SecureRandom.uuid
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
-= form.hidden_field :external_id, { data: { reference: true } }
-= react_component("ComboDepartementsSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+= form.hidden_field :value
+= form.hidden_field :external_id
+= react_component("ComboDepartementsSearch",
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)
--- a/app/views/shared/dossiers/editable_champs/_dgfip.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_dgfip.html.haml
@ -5,7 +5,7 @@
    = form.text_field :numero_fiscal,
      required: champ.mandatory?,
      size: 14,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }

  %div
    = form.label :reference_avis, t('.reference_avis_label')
@ -13,4 +13,4 @@
    = form.text_field :reference_avis,
      size: 14,
      required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }
--- a/app/views/shared/dossiers/editable_champs/_dossier_link.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_dossier_link.html.haml
@ -1,5 +1,7 @@
 .dossier-link{ class: "dossier-link-#{form.index}" }
  = form.number_field :value,
+    id: champ.input_id,
+    aria: { describedby: champ.describedby_id },
    placeholder: "Numéro de dossier",
    autocomplete: 'off',
    required: champ.mandatory?,
--- a/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml
@ -16,7 +16,7 @@
          = form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: champ.other_value_present?
          Autre
  - else
-    = form.select :value, champ.options, selected: champ.selected, required: champ.mandatory?
+    = form.select :value, champ.options, { selected: champ.selected}, required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id }

  - if champ.drop_down_other?
    = render partial: "shared/dossiers/drop_down_other_input", locals: { form: form, champ: champ }
--- a/app/views/shared/dossiers/editable_champs/_editable_champ.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_editable_champ.html.haml
@ -1,4 +1,4 @@
-.editable-champ{ class: "editable-champ-#{champ.type_champ}", data: { 'champ-id': champ.id } }
+.editable-champ{ class: "editable-champ-#{champ.type_champ}", id: champ.input_group_id }
  - if champ.repetition?
    %h3.header-subsection= champ.libelle
    - if champ.description.present?
--- a/app/views/shared/dossiers/editable_champs/_email.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_email.html.haml
@ -1,3 +1,5 @@
 = form.email_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  placeholder: champ.libelle,
  required: champ.mandatory?
--- a/app/views/shared/dossiers/editable_champs/_engagement.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_engagement.html.haml
@ -1,4 +1,4 @@
 = form.check_box :value,
-  { required: champ.mandatory? },
+  { required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id } },
  'on',
  'off'
--- a/app/views/shared/dossiers/editable_champs/_iban.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_iban.html.haml
@ -1,4 +1,5 @@
 = form.text_field :value,
+  id: champ.input_id,
  placeholder: "27 caractères au format FR7630006000011234567890189",
  required: champ.mandatory?,
-  aria: { describedby: describedby_id(champ) }
+  aria: { describedby: champ.describedby_id }
--- a/app/views/shared/dossiers/editable_champs/_integer_number.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_integer_number.html.haml
@ -1,3 +1,5 @@
 = form.number_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  placeholder: champ.libelle,
  required: champ.mandatory?
--- a/app/views/shared/dossiers/editable_champs/_linked_drop_down_list.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_linked_drop_down_list.html.haml
@ -1,16 +1,16 @@
 - if champ.options?
  = form.select :primary_value,
    champ.primary_options,
-    { required: champ.mandatory? },
-    { data: { secondary_options: champ.secondary_options } }
-  %span
-    = form.label :secondary_value do
+    {},
+    { data: { secondary_options: champ.secondary_options }, required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id } }
+
+  = form.label :secondary_value, for: "#{champ.input_id}-secondary" do
    = champ.drop_down_secondary_libelle.presence || "Valeur secondaire dépendant de la première"
    - if champ.mandatory?
      %span.mandatory *
  - if champ.drop_down_secondary_description.present?
-      .notice= string_to_html(champ.drop_down_secondary_description)
+    .notice{ id: "#{champ.describedby_id}-secondary" }= string_to_html(champ.drop_down_secondary_description)
  = form.select :secondary_value,
    champ.secondary_options[champ.primary_value],
-    { required: champ.mandatory? },
-    { data: { secondary: true } }
+    {},
+    { data: { secondary: true }, required: champ.mandatory?, id: "#{champ.input_id}-secondary", aria: { describedby: "#{champ.describedby_id}-secondary" } }
--- a/app/views/shared/dossiers/editable_champs/_mesri.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_mesri.html.haml
@ -4,4 +4,4 @@
    %p.notice= t('.ine_notice')
    = form.text_field :ine,
      required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }
--- a/app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml
@ -3,10 +3,15 @@
    = form.collection_check_boxes(:value, champ.enabled_non_empty_options, :to_s, :to_s) do |b|
      .editable-champ.editable-champ-checkbox
        = b.label do
-          = b.check_box({ multiple: true, checked: champ&.selected_options&.include?(b.value) })
+          = b.check_box({ multiple: true, checked: champ&.selected_options&.include?(b.value), aria: { describedby: champ.describedby_id } })
          = b.text

  - else
-    - hidden_field_id = SecureRandom.uuid
-    = form.hidden_field :value, { data: { uuid: hidden_field_id } }
-    = react_component("ComboMultipleDropdownList", options: champ.options, selected: champ.selected_options, disabled: champ.disabled_options, hiddenFieldId: hidden_field_id, label: champ.libelle)
+    = form.hidden_field :value
+    = react_component("ComboMultipleDropdownList",
+      options: champ.options,
+      selected: champ.selected_options,
+      disabled: champ.disabled_options,
+      id: champ.input_id,
+      labelledby: champ.labelledby_id,
+      describedby: champ.describedby_id)
--- a/app/views/shared/dossiers/editable_champs/_number.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_number.html.haml
@ -1,3 +1,5 @@
 = form.number_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  placeholder: champ.libelle,
  required: champ.mandatory?
--- a/app/views/shared/dossiers/editable_champs/_pays.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_pays.html.haml
@ -1,4 +1,6 @@
- hidden_field_id = SecureRandom.uuid
-= form.hidden_field :value, { value: champ.localized_value, data: { uuid: hidden_field_id } }
-= form.hidden_field :external_id, { data: { reference: true } }
-= react_component("ComboPaysSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+= form.hidden_field :value
+= form.hidden_field :external_id
+= react_component("ComboPaysSearch",
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)
--- a/app/views/shared/dossiers/editable_champs/_phone.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_phone.html.haml
@ -2,6 +2,8 @@
 -# very light validation is made client-side
 -# stronger validation is made server-side
 = form.phone_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  placeholder: champ.libelle,
  required: champ.mandatory?,
  pattern: "[^a-z^A-Z]+"
--- a/app/views/shared/dossiers/editable_champs/_pole_emploi.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_pole_emploi.html.haml
@ -4,4 +4,4 @@
    %p.notice= t('.identifiant_notice')
    = form.text_field :identifiant,
      required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }
--- a/app/views/shared/dossiers/editable_champs/_regions.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_regions.html.haml
@ -1,4 +1,6 @@
- hidden_field_id = SecureRandom.uuid
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
-= form.hidden_field :external_id, { data: { reference: true } }
-= react_component("ComboRegionsSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+= form.hidden_field :value
+= form.hidden_field :external_id
+= react_component("ComboRegionsSearch",
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)
--- a/app/views/shared/dossiers/editable_champs/_siret.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_siret.html.haml
@ -1,4 +1,6 @@
 = form.text_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  placeholder: champ.libelle,
  data: { remote: true, debounce: true, url: champs_siret_path(form.index), params: { champ_id: champ&.id }.to_query, spinner: true },
  required: champ.mandatory?,
--- a/app/views/shared/dossiers/editable_champs/_text.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_text.html.haml
@ -1,4 +1,5 @@
 = form.text_field :value,
+  id: champ.input_id,
  placeholder: champ.libelle,
  required: champ.mandatory?,
-  aria: { describedby: describedby_id(champ) }
+  aria: { describedby: champ.describedby_id }
--- a/app/views/shared/dossiers/editable_champs/_textarea.html.haml
+++ b/app/views/shared/dossiers/editable_champs/_textarea.html.haml
@ -1,4 +1,6 @@
 ~ form.text_area :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
  rows: 6,
  required: champ.mandatory?,
  value: html_to_string(champ.value)
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
    "@rails/activestorage": "^6.1.4-1",
    "@rails/ujs": "^6.1.4-1",
    "@rails/webpacker": "5.4.3",
+    "@reach/auto-id": "^0.16.0",
    "@reach/combobox": "^0.13.0",
    "@reach/slider": "^0.15.0",
    "@reach/visually-hidden": "^0.15.2",
@ -36,6 +37,7 @@
    "react-popper": "^2.2.5",
    "react-query": "^3.9.7",
    "react-sortable-hoc": "^1.11.0",
+    "tiny-invariant": "^1.2.0",
    "trix": "^1.2.3",
    "use-debounce": "^5.2.0",
    "webpack": "^4.46.0",
--- a/spec/controllers/champs/piece_justificative_controller_spec.rb
+++ b/spec/controllers/champs/piece_justificative_controller_spec.rb
@ -29,7 +29,7 @@ describe Champs::PieceJustificativeController, type: :controller do
      it 'renders the attachment template as Javascript' do
        subject
        expect(response.status).to eq(200)
-        expect(response.body).to include("editable-champ[data-champ-id=\"#{champ.id}\"]")
+        expect(response.body).to include("##{champ.input_group_id}")
      end
    end

--- a/spec/support/capybara.rb
+++ b/spec/support/capybara.rb
@ -35,6 +35,8 @@ Capybara.default_max_wait_time = 2

 Capybara.ignore_hidden_elements = false

+Capybara.enable_aria_label = true
+
 # Save a snapshot of the HTML page when an integration test fails
 Capybara::Screenshot.autosave_on_failure = true
 # Keep only the screenshots generated from the last failing test suite
--- a/spec/support/system_helpers.rb
+++ b/spec/support/system_helpers.rb
@ -103,41 +103,27 @@ module SystemHelpers
    end
  end

-  def select_combobox(champ, fill_with, value)
-    fill_in champ, with: fill_with
+  def select_combobox(libelle, fill_with, value, check: true)
+    fill_in libelle, with: fill_with
    selector = "li[data-option-value=\"#{value}\"]"
    find(selector).click
-    expect(page).to have_css(selector)
-    expect(page).to have_css("[type=\"hidden\"][value=\"#{value}\"]")
+    if check
+      check_selected_value(libelle, with: value)
+    end
  end

-  def select_multi_combobox(champ, fill_with, value)
-    input = find("input[aria-label=\"#{champ}\"")
-    input.click
-    input.fill_in with: fill_with
-    selector = "li[data-option-value=\"#{value}\"]"
-    find(selector).click
-    check_selected_value(champ, value)
+  def check_selected_value(libelle, with:)
+    field = find_hidden_field_for(libelle)
+    value = field.value.starts_with?('[') ? JSON.parse(field.value) : field.value
+    if value.is_a?(Array)
+      if with.is_a?(Array)
+        expect(value.sort).to eq(with.sort)
+      else
+        expect(value).to include(with)
      end
-
-  def check_selected_values(champ, values)
-    combobox = find(:xpath, "//input[@aria-label=\"#{champ}\"]/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
-    hidden_field_id = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
-    hidden_field = find("input[data-uuid=\"#{hidden_field_id}\"]")
-    hidden_field_values = JSON.parse(hidden_field.value)
-    expect(values.sort).to eq(hidden_field_values.sort)
+    else
+      expect(value).to eq(with)
    end
-
-  def check_selected_value(champ, value)
-    combobox = find(:xpath, "//input[@aria-label=\"#{champ}\"]/ancestor::div[@data-react-class='ComboMultipleDropdownList']")
-    hidden_field_id = JSON.parse(combobox["data-react-props"])["hiddenFieldId"]
-    hidden_field = find("input[data-uuid=\"#{hidden_field_id}\"]")
-    hidden_field_values = JSON.parse(hidden_field.value)
-    expect(hidden_field_values).to include(value)
-  end
-
-  def have_hidden_field(libelle, with:)
-    have_css("##{form_id_for(libelle)}[value=\"#{with}\"]")
  end

  def log_out
@ -172,6 +158,18 @@ module SystemHelpers
      end
    end
  end
+
+  def find_hidden_field_for(libelle, name: 'value')
+    find("#{form_group_id_for(libelle)} input[type=\"hidden\"][name$=\"[#{name}]\"]")
+  end
+
+  def form_group_id_for(libelle)
+    "#champ-#{form_id_for(libelle).gsub('-input', '')}"
+  end
+
+  def form_id_for(libelle)
+    find(:xpath, ".//label[contains(text()[normalize-space()], '#{libelle}')]")[:for]
+  end
 end

 RSpec.configure do |config|
--- a/spec/system/instructeurs/instructeur_creation_spec.rb
+++ b/spec/system/instructeurs/instructeur_creation_spec.rb
@ -9,7 +9,7 @@ describe 'As an instructeur', js: true do
    visit admin_procedure_path(procedure)
    find('#groupe-instructeurs').click

-    find("input[aria-label='email instructeur'").send_keys(instructeur_email, :enter)
+    fill_in 'Emails', with: instructeur_email
    perform_enqueued_jobs { click_on 'Affecter' }

    expect(page).to have_text("Les instructeurs ont bien été affectés à la démarche")
--- a/spec/system/instructeurs/instruction_spec.rb
+++ b/spec/system/instructeurs/instruction_spec.rb
@ -165,8 +165,8 @@ describe 'Instructing a dossier:', js: true do

    click_on 'Personnes impliquées'

-    select_multi_combobox('email instructeur', instructeur_2.email, instructeur_2.id)
-    select_multi_combobox('email instructeur', instructeur_3.email, instructeur_3.id)
+    select_combobox('Emails', instructeur_2.email, instructeur_2.id, check: false)
+    select_combobox('Emails', instructeur_3.email, instructeur_3.id, check: false)

    click_on 'Envoyer'

--- a/spec/system/instructeurs/procedure_filters_spec.rb
+++ b/spec/system/instructeurs/procedure_filters_spec.rb
@ -125,13 +125,13 @@ describe "procedure filters" do

  def add_column(column_name, column_path)
    click_on 'Personnaliser'
-    select_multi_combobox('colonne', column_name, column_path)
+    select_combobox('Colonne à afficher', column_name, column_path, check: false)
    click_button "Enregistrer"
  end

  def remove_column(column_name)
    click_on 'Personnaliser'
-    find(:xpath, ".//li[contains(text(), \"#{column_name}\")]/button", text: 'Désélectionner').click
+    click_button column_name
    find("body").native.send_key("Escape")
    click_button "Enregistrer"
  end
--- a/spec/system/routing/full_scenario_spec.rb
+++ b/spec/system/routing/full_scenario_spec.rb
@ -30,14 +30,14 @@ describe 'The routing', js: true do
    expect(page).to have_field('Nom du groupe', with: 'littéraire')

    # add victor to littéraire groupe
-    find("input[aria-label='email instructeur'").send_keys('victor@inst.com', :enter)
+    fill_in 'Emails', with: 'victor@inst.com'
    perform_enqueued_jobs { click_on 'Affecter' }
    expect(page).to have_text("L’instructeur victor@inst.com a été affecté au groupe « littéraire »")

    victor = User.find_by(email: 'victor@inst.com').instructeur

    # add superwoman to littéraire groupe
-    find("input[aria-label='email instructeur'").send_keys('superwoman@inst.com', :enter)
+    fill_in 'Emails', with: 'superwoman@inst.com'
    perform_enqueued_jobs { click_on 'Affecter' }
    expect(page).to have_text("L’instructeur superwoman@inst.com a été affecté au groupe « littéraire »")

@ -50,14 +50,14 @@ describe 'The routing', js: true do
    expect(page).to have_text('Le groupe d’instructeurs « scientifique » a été créé.')

    # add marie to scientifique groupe
-    find("input[aria-label='email instructeur'").send_keys('marie@inst.com', :enter)
+    fill_in 'Emails', with: 'marie@inst.com'
    perform_enqueued_jobs { click_on 'Affecter' }
    expect(page).to have_text("L’instructeur marie@inst.com a été affecté")

    marie = User.find_by(email: 'marie@inst.com').instructeur

    # add superwoman to scientifique groupe
-    find("input[aria-label='email instructeur'").send_keys('superwoman@inst.com', :enter)
+    fill_in 'Emails', with: 'superwoman@inst.com'
    perform_enqueued_jobs { click_on 'Affecter' }
    expect(page).to have_text("L’instructeur superwoman@inst.com a été affecté")

@ -112,7 +112,7 @@ describe 'The routing', js: true do
    click_on litteraire_user.dossiers.first.id.to_s
    click_on 'Modifier mon dossier'

-    fill_in 'dossier_champs_attributes_0_value', with: 'some value'
+    fill_in litteraire_user.dossiers.first.champs.first.libelle, with: 'some value'
    click_on 'Enregistrer les modifications du dossier'
    log_out

--- a/spec/system/users/brouillon_spec.rb
+++ b/spec/system/users/brouillon_spec.rb
@ -28,13 +28,13 @@ describe 'The user' do
    check('val1')
    check('val3')
    select('bravo', from: form_id_for('simple_choice_drop_down_list_long'))
-    select_multi_combobox('multiple_choice_drop_down_list_long', 'alp', 'alpha')
-    select_multi_combobox('multiple_choice_drop_down_list_long', 'cha', 'charly')
+    select_combobox('multiple_choice_drop_down_list_long', 'alp', 'alpha')
+    select_combobox('multiple_choice_drop_down_list_long', 'cha', 'charly')

    select_combobox('pays', 'aust', 'Australie')
    select_combobox('regions', 'Ma', 'Martinique')
    select_combobox('departements', 'Ai', '02 - Aisne')
-    select_combobox('communes', 'Ai', '02 - Aisne')
+    select_combobox('communes', 'Ai', '02 - Aisne', check: false)
    select_combobox('communes', 'Ambl', 'Ambléon (01300)')

    check('engagement')
@ -87,11 +87,11 @@ describe 'The user' do
    expect(page).to have_checked_field('val1')
    expect(page).to have_checked_field('val3')
    expect(page).to have_selected_value('simple_choice_drop_down_list_long', selected: 'bravo')
-    check_selected_values('multiple_choice_drop_down_list_long', ['alpha', 'charly'])
-    expect(page).to have_hidden_field('pays', with: 'Australie')
-    expect(page).to have_hidden_field('regions', with: 'Martinique')
-    expect(page).to have_hidden_field('departements', with: '02 - Aisne')
-    expect(page).to have_hidden_field('communes', with: 'Ambléon (01300)')
+    check_selected_value('multiple_choice_drop_down_list_long', with: ['alpha', 'charly'])
+    check_selected_value('pays', with: 'Australie')
+    check_selected_value('regions', with: 'Martinique')
+    check_selected_value('departements', with: '02 - Aisne')
+    check_selected_value('communes', with: 'Ambléon (01300)')
    expect(page).to have_checked_field('engagement')
    expect(page).to have_field('dossier_link', with: '123')
    expect(page).to have_text('file.pdf')
@ -337,10 +337,6 @@ describe 'The user' do
    expect(page).to have_current_path(identite_dossier_path(user_dossier))
  end

-  def form_id_for(libelle)
-    find(:xpath, ".//label[contains(text()[normalize-space()], '#{libelle}')]")[:for]
-  end
-
  def form_id_for_datetime(libelle)
    # The HTML for datetime is a bit specific since it has 5 selects, below here is a sample HTML
    # So, we want to find the partial id of a datetime (partial because there are 5 ids:
--- a/spec/system/users/linked_dropdown_spec.rb
+++ b/spec/system/users/linked_dropdown_spec.rb
@ -27,16 +27,16 @@ describe 'linked dropdown lists' do
    fill_individual

    # Select a primary value
-    select('Primary 2', from: primary_id_for('linked dropdown'))
+    select('Primary 2', from: 'linked dropdown')

    # Secondary menu reflects chosen primary value
-    expect(page).to have_select(secondary_id_for('linked dropdown'), options: ['', 'Secondary 2.1', 'Secondary 2.2', 'Secondary 2.3'])
+    expect(page).to have_select("Valeur secondaire dépendant de la première", options: ['', 'Secondary 2.1', 'Secondary 2.2', 'Secondary 2.3'])

    # Select another primary value
-    select('Primary 1', from: primary_id_for('linked dropdown'))
+    select('Primary 1', from: 'linked dropdown')

    # Secondary menu gets updated
-    expect(page).to have_select(secondary_id_for('linked dropdown'), options: ['', 'Secondary 1.1', 'Secondary 1.2'])
+    expect(page).to have_select("Valeur secondaire dépendant de la première", options: ['', 'Secondary 1.1', 'Secondary 1.2'])
  end

  private
@ -63,15 +63,4 @@ describe 'linked dropdown lists' do
    click_on 'Continuer'
    expect(page).to have_current_path(brouillon_dossier_path(user_dossier))
  end
-
-  def primary_id_for(libelle)
-    find(:xpath, ".//label[contains(text()[normalize-space()], '#{libelle}')]")[:for]
-  end
-
-  def secondary_id_for(libelle)
-    primary_id = primary_id_for(libelle)
-    find("\##{primary_id}")
-      .ancestor('.editable-champ')
-      .find("[data-secondary]")['id']
-  end
 end
--- a/yarn.lock
+++ b/yarn.lock
@ -1838,6 +1838,14 @@
    "@reach/utils" "0.15.3"
    tslib "^2.3.0"

+"@reach/auto-id@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
+  integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
 "@reach/combobox@^0.13.0":
  version "0.13.2"
  resolved "https://registry.yarnpkg.com/@reach/combobox/-/combobox-0.13.2.tgz#f0a38c685a2704f6a189709e63cd7e25809da1e4"
@ -1922,6 +1930,14 @@
    tiny-warning "^1.0.3"
    tslib "^2.3.0"

+"@reach/utils@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
+  integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
+  dependencies:
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@reach/visually-hidden@^0.15.2":
  version "0.15.2"
  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.15.2.tgz#07794cb53f4bd23a9452d53a0ad7778711ee323f"
@ -12445,6 +12461,11 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

+tiny-invariant@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
+  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
+
 tiny-warning@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"