From abbb9c341f5c5bff46e5abb505989a2b6a051a59 Mon Sep 17 00:00:00 2001
From: volubyl <volubyl@pm.me>
Date: Thu, 4 May 2023 17:55:17 +0200
Subject: [PATCH] fix contribuer page

---
 .../components/DatasetForm/DatasetForm.svelte |  34 +++--
 .../_GeographicalCoverageField.svelte         | 121 -----------------
 .../DatasetForm/_LicenseField.spec.ts         |  83 ------------
 .../DatasetForm/_LicenseField.svelte          | 123 ------------------
 .../DatasetForm/_LicenseFieldHintText.svelte  |  10 ++
 .../FormatSelector/FormatSelector.svelte      |  26 ++--
 .../SearchableComboBox/Basic.svelte           |  52 ++++----
 .../WithAddItemButton.svelte                  |   1 +
 .../lib/components/SkipLink/SkipLink.svelte   |   4 +-
 .../src/routes/(app)/contribuer/+page.svelte  |   6 +-
 client/src/routes/(app)/contribuer/+page.ts   |   2 +-
 client/src/tests/e2e/contribuer.spec.ts       |  10 +-
 12 files changed, 89 insertions(+), 383 deletions(-)
 delete mode 100644 client/src/lib/components/DatasetForm/_GeographicalCoverageField.svelte
 delete mode 100644 client/src/lib/components/DatasetForm/_LicenseField.spec.ts
 delete mode 100644 client/src/lib/components/DatasetForm/_LicenseField.svelte
 create mode 100644 client/src/lib/components/DatasetForm/_LicenseFieldHintText.svelte

diff --git a/client/src/lib/components/DatasetForm/DatasetForm.svelte b/client/src/lib/components/DatasetForm/DatasetForm.svelte
index 0f774aa4..37a0f04d 100644
--- a/client/src/lib/components/DatasetForm/DatasetForm.svelte
+++ b/client/src/lib/components/DatasetForm/DatasetForm.svelte
@@ -16,7 +16,6 @@
   import { formatHTMLDate } from "$lib/util/format";
   import { account } from "src/lib/stores/auth";
   import ContactEmailsField from "../ContactEmailsField/ContactEmailsField.svelte";
-  import GeographicalCoverageField from "./_GeographicalCoverageField.svelte";
   import Select from "../Select/Select.svelte";
   import InputField from "../InputField/InputField.svelte";
   import TextareaField from "../TextareaField/TextareaField.svelte";
@@ -24,12 +23,13 @@
   import { handleSelectChange } from "src/lib/util/form";
   import TagSelector from "../TagSelector/TagSelector.svelte";
   import RadioGroupField from "../RadioGroupField/RadioGroupField.svelte";
-  import LicenseField from "./_LicenseField.svelte";
+  import LicenseFieldHintText from "./_LicenseFieldHintText.svelte";
   import type { Catalog, ExtraFieldValue } from "src/definitions/catalogs";
   import ExtraField from "./_ExtraField.svelte";
   import Alert from "../Alert/Alert.svelte";
   import type { DataFormat } from "src/definitions/dataformat";
   import FormatSelector from "../FormatSelector/FormatSelector.svelte";
+  import SearchableComboBox from "../SearchableComboBox/Basic.svelte";
 
   export let submitLabel = "Publier la fiche de données";
   export let loadingLabel = "Publication en cours...";
@@ -273,11 +273,20 @@
       on:input={handleFieldChange}
     />
 
-    <GeographicalCoverageField
+    <SearchableComboBox
+      name="geographicalCoverage"
+      label="Couverture géographique"
+      hintText="Quelle est l'étendue de la zone couverte par ce jeu de données ?"
       value={$form.geographicalCoverage}
       error={$errors.geographicalCoverage}
-      suggestions={geographicalCoverages}
-      on:input={(ev) => updateValidateField("geographicalCoverage", ev.detail)}
+      options={geographicalCoverages.map((item) => {
+        return {
+          label: item,
+          value: item,
+        };
+      })}
+      on:selectOption={(ev) =>
+        updateValidateField("geographicalCoverage", ev.detail.value)}
     />
   </div>
 
@@ -397,11 +406,20 @@
       on:input={handleFieldChange}
     />
 
-    <LicenseField
+    <SearchableComboBox
+      name="license"
+      required={false}
+      label="Licence de réutilisation"
+      hintText={LicenseFieldHintText}
       value={$form.license}
       error={$errors.license}
-      suggestions={licenses}
-      on:input={(ev) => updateValidateField("license", ev.detail)}
+      options={licenses.map((item) => {
+        return {
+          label: item,
+          value: item,
+        };
+      })}
+      on:selectOption={(ev) => updateValidateField("license", ev.detail.value)}
     />
   </div>
 
diff --git a/client/src/lib/components/DatasetForm/_GeographicalCoverageField.svelte b/client/src/lib/components/DatasetForm/_GeographicalCoverageField.svelte
deleted file mode 100644
index 5ed30cea..00000000
--- a/client/src/lib/components/DatasetForm/_GeographicalCoverageField.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { Maybe } from "$lib/util/maybe";
-  import { escape } from "src/lib/util/string";
-  import { clickOutside } from "$lib/actions/clickOutside";
-  import RequiredMarker from "../RequiredMarker/RequiredMarker.svelte";
-
-  export let value: string | null = null;
-  export let error = "";
-  export let suggestions: string[] = [];
-
-  let showSuggestions = false;
-
-  const dispatch = createEventDispatcher<{ input: string }>();
-
-  $: regexp = Maybe.map(value, (v) => new RegExp(escape(v), "i"));
-  $: filteredSuggestions = showSuggestions
-    ? suggestions.filter((item) =>
-        Maybe.Some(regexp) ? Maybe.Some(item.match(regexp)) : true
-      )
-    : [];
-
-  const onInput = (ev: Event & { currentTarget: HTMLInputElement }) => {
-    dispatch("input", ev.currentTarget.value);
-  };
-
-  const onSelectItem = (item: string) => {
-    showSuggestions = false;
-    dispatch("input", item);
-  };
-</script>
-
-<div
-  class="fr-input-group dropdown fr-my-4w"
-  class:fr-input-group--error={error}
-  use:clickOutside={{ callback: () => (showSuggestions = false) }}
->
-  <label class="fr-label" for="geographicalCoverage">
-    Couverture géographique
-    <RequiredMarker />
-    <span class="fr-hint-text" id="geographicalCoverage-desc-hint">
-      Quelle est l'étendue de la zone couverte par ce jeu de données ?
-    </span>
-  </label>
-
-  <input
-    class="fr-input"
-    class:fr-input--error={error}
-    type="text"
-    id="geographicalCoverage"
-    name="geographicalCoverage"
-    {value}
-    required
-    role="combobox"
-    autocomplete="off"
-    aria-controls="geographicalCoverage-results"
-    aria-autocomplete="list"
-    aria-expanded={showSuggestions}
-    aria-describedby={error ? "geographicalCoverage-desc-error" : null}
-    on:input={onInput}
-    on:focus={() => (showSuggestions = true)}
-  />
-
-  <ul
-    id="geographicalCoverage-results"
-    class="fr-raw-list dropdown--list"
-    role="listbox"
-    aria-label="Suggestions"
-  >
-    {#each filteredSuggestions as item}
-      <li
-        id="geographicalCoverage-{item}"
-        class="dropdown--list-item"
-        role="option"
-        tabindex="0"
-        on:click={() => onSelectItem(item)}
-        on:keydown={(ev) => {
-          if (ev.key === "Enter") {
-            onSelectItem(item);
-          }
-        }}
-      >
-        {item}
-      </li>
-    {/each}
-  </ul>
-
-  {#if error}
-    <p id="geographicalCoverage-desc-error" class="fr-error-text">
-      {error}
-    </p>
-  {/if}
-</div>
-
-<style>
-  .dropdown {
-    position: relative;
-  }
-
-  .dropdown--list {
-    position: absolute;
-    width: 100%;
-    max-height: 32vh;
-    overflow: scroll;
-    background-color: var(--grey-1000-75);
-    border: 1px solid var(--background-contrast-grey);
-    box-shadow: 0 0 10px var(--grey-925);
-    z-index: 10;
-  }
-
-  .dropdown--list-item {
-    cursor: pointer;
-    padding: 0.5rem 1rem;
-    margin: 0;
-    border-top: 1px solid var(--background-contrast-grey);
-  }
-
-  .dropdown--list-item:hover {
-    background-color: var(--background-contrast-grey);
-  }
-</style>
diff --git a/client/src/lib/components/DatasetForm/_LicenseField.spec.ts b/client/src/lib/components/DatasetForm/_LicenseField.spec.ts
deleted file mode 100644
index 0dbb87f3..00000000
--- a/client/src/lib/components/DatasetForm/_LicenseField.spec.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import "@testing-library/jest-dom";
-
-import { render, fireEvent } from "@testing-library/svelte";
-import LicenseField from "./_LicenseField.svelte";
-
-describe("License field", () => {
-  test("should have an input", () => {
-    const { getByRole } = render(LicenseField);
-    const input = getByRole("combobox");
-    expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute("autocomplete", "off");
-  });
-
-  test("should show nothing on click if no suggestions", async () => {
-    const { getByRole, queryAllByRole } = render(LicenseField);
-    await fireEvent.focus(getByRole("combobox"));
-    const options = queryAllByRole("option");
-    expect(options.length).toBe(0);
-  });
-
-  test("should not show suggestions initially", async () => {
-    const { queryAllByRole } = render(LicenseField, {
-      props: { suggestions: ["Licence Ouverte", "ODC Open Database License"] },
-    });
-    const options = queryAllByRole("option");
-    expect(options.length).toBe(0);
-  });
-
-  test("should show suggestions on focusing the input", async () => {
-    const { getByRole, getAllByRole } = render(LicenseField, {
-      props: { suggestions: ["Licence Ouverte", "ODC Open Database License"] },
-    });
-    await fireEvent.focus(getByRole("combobox"));
-    const suggestions = getAllByRole("option");
-    expect(suggestions.length).toBe(2);
-    expect(suggestions[0]).toHaveTextContent("Licence Ouverte");
-    expect(suggestions[1]).toHaveTextContent("ODC Open Database License");
-  });
-
-  test("should filter suggestions by input value", async () => {
-    const { getByRole, getAllByRole } = render(LicenseField, {
-      props: { suggestions: ["Licence Ouverte", "ODC Open Database License"] },
-    });
-
-    const input = getByRole("combobox");
-
-    await fireEvent.focus(input);
-    await fireEvent.input(input, { target: { value: "ouv" } });
-    expect(input).toHaveValue("ouv");
-
-    const suggestions = getAllByRole("option");
-    expect(suggestions.length).toBe(1);
-    expect(suggestions[0]).toHaveTextContent("Licence Ouverte");
-  });
-
-  test("should choose a suggestion", async () => {
-    const { getByRole, getAllByRole, component } = render(LicenseField, {
-      props: { suggestions: ["Licence Ouverte", "ODC Open Database License"] },
-    });
-
-    const input = getByRole("combobox");
-    await fireEvent.focus(input);
-
-    const suggestions = getAllByRole("option");
-    expect(suggestions.length).toBe(2);
-
-    let value = "";
-    component.$on("input", (event) => (value = event.detail));
-    await fireEvent.click(suggestions[0]);
-    expect(value).toBe("Licence Ouverte");
-  });
-
-  test("should show error", async () => {
-    const { getByRole } = render(LicenseField, {
-      props: { error: "Unexpected error" },
-    });
-    const input = getByRole("combobox");
-    expect(input).toHaveAccessibleDescription("Unexpected error");
-  });
-});
diff --git a/client/src/lib/components/DatasetForm/_LicenseField.svelte b/client/src/lib/components/DatasetForm/_LicenseField.svelte
deleted file mode 100644
index b3a13770..00000000
--- a/client/src/lib/components/DatasetForm/_LicenseField.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { escape } from "$lib/util/string";
-  import { clickOutside } from "$lib/actions/clickOutside";
-
-  export let value = "";
-  export let error = "";
-  export let suggestions: string[] = [];
-
-  let showSuggestions = false;
-
-  const dispatch = createEventDispatcher<{ input: string }>();
-
-  $: filteredSuggestions = suggestions.filter((item) =>
-    item.match(new RegExp(escape(value), "i"))
-  );
-
-  const onInput = (ev: Event & { currentTarget: HTMLInputElement }) => {
-    dispatch("input", ev.currentTarget.value);
-  };
-
-  const onSelectItem = (item: string) => {
-    showSuggestions = false;
-    dispatch("input", item);
-  };
-</script>
-
-<div
-  class="fr-input-group dropdown fr-my-4w"
-  class:fr-input-group--error={error}
-  use:clickOutside={{ callback: () => (showSuggestions = false) }}
->
-  <label class="fr-label" for="license">
-    Licence de réutilisation
-    <span class="fr-hint-text" id="license-desc-hint">
-      Indiquez la <a
-        href="https://www.data.gouv.fr/fr/pages/legal/licences"
-        target="_blank"
-        rel="noreferrer"
-        title="Voir les licences de réutilisation sur data.gouv.fr"
-      >
-        licence de réutilisation
-      </a> associée au jeu de données.
-    </span>
-  </label>
-
-  <input
-    class="fr-input"
-    class:fr-input--error={error}
-    type="text"
-    id="license"
-    name="license"
-    bind:value
-    role="combobox"
-    autocomplete="off"
-    aria-controls="license-results"
-    aria-autocomplete="list"
-    aria-expanded={showSuggestions}
-    aria-describedby={error ? "license-desc-error" : null}
-    on:input={onInput}
-    on:focus={() => (showSuggestions = true)}
-  />
-
-  <ul
-    id="license-results"
-    class="fr-raw-list dropdown--list"
-    role="listbox"
-    aria-label="Licences"
-  >
-    {#if showSuggestions}
-      {#each filteredSuggestions as item}
-        <li
-          id="license-{item}"
-          class="dropdown--list-item"
-          role="option"
-          tabindex="0"
-          on:click={() => onSelectItem(item)}
-          on:keydown={(ev) => {
-            if (ev.key === "Enter") {
-              onSelectItem(item);
-            }
-          }}
-        >
-          {item}
-        </li>
-      {/each}
-    {/if}
-  </ul>
-
-  {#if error}
-    <p id="license-desc-error" class="fr-error-text">
-      {error}
-    </p>
-  {/if}
-</div>
-
-<style>
-  .dropdown {
-    position: relative;
-  }
-
-  .dropdown--list {
-    position: absolute;
-    width: 100%;
-    max-height: 32vh;
-    overflow: scroll;
-    background-color: var(--grey-1000-75);
-    border: 1px solid var(--background-contrast-grey);
-    box-shadow: 0 0 10px var(--grey-925);
-    z-index: 10;
-  }
-
-  .dropdown--list-item {
-    cursor: pointer;
-    padding: 0.5rem 1rem;
-    margin: 0;
-    border-top: 1px solid var(--background-contrast-grey);
-  }
-
-  .dropdown--list-item:hover {
-    background-color: var(--background-contrast-grey);
-  }
-</style>
diff --git a/client/src/lib/components/DatasetForm/_LicenseFieldHintText.svelte b/client/src/lib/components/DatasetForm/_LicenseFieldHintText.svelte
new file mode 100644
index 00000000..3a6fa573
--- /dev/null
+++ b/client/src/lib/components/DatasetForm/_LicenseFieldHintText.svelte
@@ -0,0 +1,10 @@
+<span class="fr-hint-text" id="license-desc-hint">
+  Indiquez la <a
+    href="https://www.data.gouv.fr/fr/pages/legal/licences"
+    target="_blank"
+    rel="noreferrer"
+    title="Voir les licences de réutilisation sur data.gouv.fr"
+  >
+    licence de réutilisation
+  </a> associée au jeu de données.
+</span>
diff --git a/client/src/lib/components/FormatSelector/FormatSelector.svelte b/client/src/lib/components/FormatSelector/FormatSelector.svelte
index d5694aeb..03ee7d0b 100644
--- a/client/src/lib/components/FormatSelector/FormatSelector.svelte
+++ b/client/src/lib/components/FormatSelector/FormatSelector.svelte
@@ -63,18 +63,20 @@
     on:selectOption={handleSelectFormat}
   />
 
-  <div role="list" aria-live="polite">
-    {#each selectedFormatOptions as format, index}
-      {#if format.name}
-        <Tag
-          id={`${format.name}-option-${index}`}
-          name={format.name}
-          role="listitem"
-          on:click={handleRemoveDataFormat}
-        />
-      {/if}
-    {/each}
-  </div>
+  {#if selectedFormatOptions.length > 0}
+    <div role="list" aria-live="polite">
+      {#each selectedFormatOptions as format, index}
+        {#if format.name}
+          <Tag
+            id={`${format.name}-option-${index}`}
+            name={format.name}
+            role="listitem"
+            on:click={handleRemoveDataFormat}
+          />
+        {/if}
+      {/each}
+    </div>
+  {/if}
 </div>
 
 <style>
diff --git a/client/src/lib/components/SearchableComboBox/Basic.svelte b/client/src/lib/components/SearchableComboBox/Basic.svelte
index b56b196c..7dd7a46b 100644
--- a/client/src/lib/components/SearchableComboBox/Basic.svelte
+++ b/client/src/lib/components/SearchableComboBox/Basic.svelte
@@ -2,26 +2,27 @@
   import type { SelectOption } from "src/definitions/form";
   import RequiredMarker from "../RequiredMarker/RequiredMarker.svelte";
   import { escape } from "src/lib/util/string";
+
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher<{
-    selectOption: SelectOption<number>;
+    selectOption: SelectOption<number | string>;
     addItem: string;
   }>();
 
   export let name: string;
   export let label = "";
-  export let hintText = "";
-  export let options: SelectOption<number>[];
+  export let hintText: any = "";
+  export let options: SelectOption<number | string>[];
   export let error = "";
   export let value = "";
   export let labelledby = " ";
+  export let required = true;
 
-  let disableAddItem = true;
   let suggestionList: HTMLElement;
   let currentLiIndex = 0;
 
-  let selectedOption: SelectOption<number>;
+  let selectedOption: SelectOption<number | string>;
   let textBoxHasFocus = false;
   let listBoxHasFocus = false;
   let showSuggestions = false;
@@ -36,10 +37,12 @@
     showSuggestions = false;
   }
 
-  const getSelectedOption = (value: string): SelectOption<number> | undefined =>
+  const getSelectedOption = (
+    value: string
+  ): SelectOption<number | string> | undefined =>
     filteredSuggestions.find((item) => item.label === value.trim());
 
-  const handleSelectOption = (option: SelectOption<number>) => {
+  const handleSelectOption = (option: SelectOption<number | string>) => {
     selectedOption = option;
     dispatch("selectOption", selectedOption);
   };
@@ -55,31 +58,14 @@
   };
 
   const handleInput = (ev: Event & { currentTarget: HTMLInputElement }) => {
-    disableAddItem = true;
     textBoxHasFocus = true;
     showSuggestions = true;
     value = ev.currentTarget.value;
-
-    const optionAlreadyExists =
-      options.findIndex((item) => item.label === value) !== -1;
-
-    if (!optionAlreadyExists) {
-      disableAddItem = false;
-    }
   };
 
   const handeChange = (ev: Event & { currentTarget: HTMLInputElement }) => {
-    disableAddItem = true;
     value = ev.currentTarget.value;
-
-    const optionAlreadyExists =
-      options.findIndex((item) => item.label === value) !== -1;
-
-    if (!optionAlreadyExists) {
-      disableAddItem = false;
-    }
   };
-
   const handleInputFocused = () => {
     showSuggestions = true;
     textBoxHasFocus = true;
@@ -289,11 +275,19 @@
   {#if label}
     <label class="fr-label" for={name}>
       {label}
-      <RequiredMarker />
+
+      {#if required}
+        <RequiredMarker />
+      {/if}
+
       {#if hintText}
-        <span class="fr-hint-text" id={`select-hint-${name}-hint`}>
-          {hintText}
-        </span>
+        {#if typeof hintText === "string"}
+          <span class="fr-hint-text" id={`select-hint-${name}-hint`}>
+            {hintText}
+          </span>
+        {:else}
+          <svelte:component this={hintText} />
+        {/if}
       {/if}
     </label>
   {/if}
@@ -309,7 +303,7 @@
       {name}
       id={name}
       {value}
-      required
+      {required}
       role="combobox"
       autocomplete="off"
       aria-controls={`${name}-suggestions`}
diff --git a/client/src/lib/components/SearchableComboBox/WithAddItemButton.svelte b/client/src/lib/components/SearchableComboBox/WithAddItemButton.svelte
index 79b654f1..f4b13a59 100644
--- a/client/src/lib/components/SearchableComboBox/WithAddItemButton.svelte
+++ b/client/src/lib/components/SearchableComboBox/WithAddItemButton.svelte
@@ -319,6 +319,7 @@
       on:click={handleAddItem}
       type="button"
       class="fr-btn fr-icon-add-line"
+      title={`créer un nouveau format de donnée`}
     />
   </div>
 
diff --git a/client/src/lib/components/SkipLink/SkipLink.svelte b/client/src/lib/components/SkipLink/SkipLink.svelte
index eed71c13..b29904be 100644
--- a/client/src/lib/components/SkipLink/SkipLink.svelte
+++ b/client/src/lib/components/SkipLink/SkipLink.svelte
@@ -12,8 +12,8 @@
       {#each Object.keys(linksMap) as linkmapKey}
         <li>
           <a class="fr-nav__link" href={`#${linksMap[linkmapKey]}`}
-            >{linkmapKey}</a
-          >
+            >{linkmapKey}
+          </a>
         </li>
       {/each}
     </ul>
diff --git a/client/src/routes/(app)/contribuer/+page.svelte b/client/src/routes/(app)/contribuer/+page.svelte
index 09f1c383..737b212c 100644
--- a/client/src/routes/(app)/contribuer/+page.svelte
+++ b/client/src/routes/(app)/contribuer/+page.svelte
@@ -89,9 +89,9 @@
 
 <header class="fr-p-4w">
   <div class="fr-col">
-    <h5 class="fr-grid-row fr-text--regular">
+    <h1 class="fr-grid-row fr-h5 fr-text--regular">
       Contribuer une fiche de jeu de données
-    </h5>
+    </h1>
     {#if Maybe.Some(catalog)}
       <p class="fr-grid-row fr-text--sm fr-text-mention--grey">
         Catalogue : {catalog.organization.name}
@@ -105,12 +105,14 @@
       data-fr-opened="false"
       data-testid="exit-contribution-form"
       aria-controls={modalControlId}
+      title="fermer le formulaire de contribution"
     >
       {""}
     </button>
   {:else}
     <button
       data-testid="exit-contribution-form"
+      title="fermer le formulaire de contribution"
       class="fr-btn fr-icon-close-line fr-btn--icon fr-btn--secondary"
       on:click={handleExitForm}
     >
diff --git a/client/src/routes/(app)/contribuer/+page.ts b/client/src/routes/(app)/contribuer/+page.ts
index 7b761bdf..d1a31b76 100644
--- a/client/src/routes/(app)/contribuer/+page.ts
+++ b/client/src/routes/(app)/contribuer/+page.ts
@@ -23,7 +23,7 @@ export const load: PageLoad = async ({ fetch }) => {
   ]);
 
   return {
-    title: `Contribuer une fiche de jeu de données - ${SITE_TITLE}`,
+    title: `${SITE_TITLE} - Contribuer une fiche de jeu de données`,
     catalog,
     tags,
     licenses,
diff --git a/client/src/tests/e2e/contribuer.spec.ts b/client/src/tests/e2e/contribuer.spec.ts
index 6db13262..f5892054 100644
--- a/client/src/tests/e2e/contribuer.spec.ts
+++ b/client/src/tests/e2e/contribuer.spec.ts
@@ -24,7 +24,7 @@ test.describe("Basic form submission", () => {
 
     await page.goto("/contribuer");
     await expect(page).toHaveTitle(
-      "Contribuer une fiche de jeu de données - Catalogue"
+      "Catalogue - Contribuer une fiche de jeu de données"
     );
 
     await page.locator("text=Ministère de la Culture").waitFor();
@@ -52,6 +52,8 @@ test.describe("Basic form submission", () => {
       geographicalCoverageText
     );
 
+    await page.getByText(geographicalCoverageText).click();
+
     // "Sources et formats" section
 
     await page
@@ -101,10 +103,14 @@ test.describe("Basic form submission", () => {
     await url.fill(urlText);
     expect(await url.inputValue()).toBe(urlText);
 
-    const license = page.locator("form [name=license]");
+    const license = await page.locator("form [name=license]");
+
     await license.fill(licenseText);
+
     expect(await license.inputValue()).toBe(licenseText);
 
+    await page.getByText(licenseText).first().click();
+
     // "Mots clés" section
 
     const tags = page.locator("form [name=tags]");