From cceaba970374487f5bd58cb5bd48529fffc11f03 Mon Sep 17 00:00:00 2001
From: volubyl <volubyl@pm.me>
Date: Thu, 20 Apr 2023 09:01:18 +0200
Subject: [PATCH] Highilght filter when active

---
 client/src/app.css                            |   4 +
 client/src/constants.ts                       |   2 +-
 client/src/definitions/datasetFilters.ts      |   5 +-
 .../DatasetListItem/DatasetListItem.svelte    |   2 +-
 .../src/lib/components/Header/Header.svelte   |   6 +-
 .../SearchFilter/SearchFilterSkeleton.svelte  |  16 ++-
 .../SearchFilter/TextSearchFilter.svelte      |   6 +-
 .../components/SearchForm/SearchForm.svelte   |   1 +
 .../SearchableComboBox/Basic.svelte           | 133 ++++++++++++------
 client/src/lib/util/datasetFilters.test.ts    |  65 ++++++++-
 client/src/lib/util/datasetFilters.ts         |  57 +++++++-
 client/src/routes/(app)/fiches/[id]/+page.ts  |   4 +-
 .../routes/(app)/fiches/search/+page.svelte   |  54 +++++--
 .../src/routes/(app)/fiches/search/+page.ts   |   2 +-
 .../(app)/fiches/search/_FilterPanel.svelte   |  23 +--
 client/src/tests/e2e/a11y.spec.ts             |  11 ++
 client/src/tests/e2e/contribuer.spec.ts       |   2 +-
 client/src/tests/e2e/datapass.spec.ts         |   4 +-
 client/src/tests/e2e/details.spec.ts          |   4 +-
 client/src/tests/e2e/edit.spec.ts             |   2 +-
 client/src/tests/e2e/home.spec.ts             |   2 +-
 client/src/tests/e2e/login.spec.ts            |   2 +-
 client/src/tests/e2e/search.spec.ts           |  20 +--
 client/src/tests/e2e/static.spec.ts           |   8 +-
 server/api/app.py                             |   2 +-
 25 files changed, 319 insertions(+), 118 deletions(-)

diff --git a/client/src/app.css b/client/src/app.css
index 8dc32bfa..e67f9ab0 100644
--- a/client/src/app.css
+++ b/client/src/app.css
@@ -7,6 +7,10 @@ mark {
   background-color: var(--background-contrast-info);
 }
 
+.bottom_line {
+  border-bottom: 1px solid var(--border-default-grey);
+}
+
 :root {
   /*
   Breakpoints in DSFR. This is for reference only. The @media CSS spec does not
diff --git a/client/src/constants.ts b/client/src/constants.ts
index a6243f2b..92fe74d9 100644
--- a/client/src/constants.ts
+++ b/client/src/constants.ts
@@ -4,7 +4,7 @@ import type {
 } from "./definitions/datasets";
 import type { TrustedHtml } from "./lib/util/html";
 
-export const SITE_TITLE = "catalogue.data.gouv.fr";
+export const SITE_TITLE = "Catalogue";
 
 export const SITE_DESCRIPTION =
   "Un service pour aider les administrations à créer, gérer et ouvrir leurs catalogues.";
diff --git a/client/src/definitions/datasetFilters.ts b/client/src/definitions/datasetFilters.ts
index 52f7803c..85d2f5fd 100644
--- a/client/src/definitions/datasetFilters.ts
+++ b/client/src/definitions/datasetFilters.ts
@@ -26,7 +26,8 @@ export type DatasetFiltersValue = {
   license: string | null;
   extraFieldValues: ExtraFieldValue[] | null;
 };
-type BasicMap = {
+export type BasicMap = {
+  id?: string;
   key: string;
   value: string | number;
 };
@@ -39,7 +40,7 @@ export type ActiveDatasetFiltersMap = {
   technicalSource?: BasicMap;
   tagId?: BasicMap;
   license?: BasicMap;
-  extraFieldValues?: BasicMap;
+  extraFieldValues?: BasicMap[];
 };
 
 export type DatasetFiltersOptions = {
diff --git a/client/src/lib/components/DatasetListItem/DatasetListItem.svelte b/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
index 592a7f75..b108ca55 100644
--- a/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
+++ b/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
@@ -33,7 +33,7 @@
     data-test-id="dataset-list-item"
     class="item"
     href={paths.datasetDetail({ id: dataset.id })}
-    title="Consulter cette fiche de données"
+    title={`Consulter la fiche de données ${dataset.catalogRecord.organization.name} : ${dataset.title}`}
   >
     <div class="item__logo">
       {#if dataset.catalogRecord.organization.logoUrl}
diff --git a/client/src/lib/components/Header/Header.svelte b/client/src/lib/components/Header/Header.svelte
index 68a62769..3d3aace6 100644
--- a/client/src/lib/components/Header/Header.svelte
+++ b/client/src/lib/components/Header/Header.svelte
@@ -22,7 +22,7 @@
         <div class="fr-header__brand fr-enlarge-link">
           <div class="fr-header__brand-top">
             <div class="fr-header__logo">
-              <a href="/" aria-label="Accueil - Etalab">
+              <a href="/" title="vers Accueil - Etalab">
                 <p class="fr-logo">
                   République
                   <br />Française
@@ -47,8 +47,8 @@
           </div>
 
           <div class="fr-header__service">
-            <a href="/" title={`Accueil - ${SITE_TITLE}- Etalab`}>
-              <p class="fr-header__service-title">{SITE_TITLE}</p>
+            <a href="/" title={` vers page d'accueil - catalogue.data.gouv.fr`}>
+              <p class="fr-header__service-title">catalogue.data.gouv.fr</p>
             </a>
           </div>
         </div>
diff --git a/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte b/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte
index 96b389de..4606ecd4 100644
--- a/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte
+++ b/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte
@@ -5,6 +5,7 @@
   export let label: string;
   export let isOverlayOpen = false;
   export let higlighted = false;
+  export let selected = true;
 
   $: slug = slugify(label);
 </script>
@@ -12,14 +13,17 @@
 <div class="container">
   <span
     class:fr-h5={higlighted}
+    class:label--selected={selected}
     data-testId={`${slug}-label`}
     id={`${slug}-label`}>{label}</span
   >
   <button
     aria-labelledby={`${slug}-label`}
     class="fr-select"
+    class:button--selected={selected}
     data-testId={`${slug}-button`}
-    on:mousedown>{buttonText}</button
+    on:mousedown
+    on:click>{buttonText}</button
   >
 
   {#if isOverlayOpen}
@@ -55,4 +59,14 @@
     position: absolute;
     border: 1px solid var(--background-contrast-grey);
   }
+
+  .button--selected {
+    background-color: var(--blue-france-925-125-active) !important;
+    color: var(--blue-france-sun-113-625-active);
+  }
+
+  .label--selected {
+    font: bold;
+    color: var(--blue-france-sun-113-625-active);
+  }
 </style>
diff --git a/client/src/lib/components/SearchFilter/TextSearchFilter.svelte b/client/src/lib/components/SearchFilter/TextSearchFilter.svelte
index af59826f..4f09ed41 100644
--- a/client/src/lib/components/SearchFilter/TextSearchFilter.svelte
+++ b/client/src/lib/components/SearchFilter/TextSearchFilter.svelte
@@ -9,11 +9,12 @@
   export let label: string;
   export let options: SelectOption<any>[];
   export let higlighted = false;
+  export let selected = false;
 
   $: options = [
     {
       label: "Réinistialiser le filtre",
-      value: undefined,
+      value: "",
     },
     ...options,
   ];
@@ -39,7 +40,8 @@
   buttonText={buttonText || "Rechercher..."}
   isOverlayOpen={showOverLay}
   {higlighted}
-  on:mousedown={handleShowOverLay}
+  {selected}
+  on:click={handleShowOverLay}
 >
   <Basic
     on:selectOption
diff --git a/client/src/lib/components/SearchForm/SearchForm.svelte b/client/src/lib/components/SearchForm/SearchForm.svelte
index b32f1ea8..1bf83385 100644
--- a/client/src/lib/components/SearchForm/SearchForm.svelte
+++ b/client/src/lib/components/SearchForm/SearchForm.svelte
@@ -15,6 +15,7 @@
 >
   <label for="q" class="fr-label">Rechercher</label>
   <input
+    id="q"
     type="search"
     class="fr-input"
     name="q"
diff --git a/client/src/lib/components/SearchableComboBox/Basic.svelte b/client/src/lib/components/SearchableComboBox/Basic.svelte
index 4fdb3283..b56b196c 100644
--- a/client/src/lib/components/SearchableComboBox/Basic.svelte
+++ b/client/src/lib/components/SearchableComboBox/Basic.svelte
@@ -5,23 +5,26 @@
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher<{
-    selectOption: SelectOption<number | string | null>;
+    selectOption: SelectOption<number>;
     addItem: string;
   }>();
 
   export let name: string;
   export let label = "";
   export let hintText = "";
-  export let options: SelectOption<number | string | null>[];
+  export let options: SelectOption<number>[];
   export let error = "";
   export let value = "";
-  export let labelledby = "";
+  export let labelledby = " ";
 
+  let disableAddItem = true;
   let suggestionList: HTMLElement;
   let currentLiIndex = 0;
-  let showSuggestions = false;
-  let selectedOption: SelectOption<number | string | null>;
+
+  let selectedOption: SelectOption<number>;
   let textBoxHasFocus = false;
+  let listBoxHasFocus = false;
+  let showSuggestions = false;
 
   $: regexp = value ? new RegExp(escape(value), "i") : null;
 
@@ -29,35 +32,58 @@
     ? options.filter((item) => (regexp ? item.label.match(regexp) : true))
     : [];
 
-  const getSelectedOption = (
-    value: string
-  ): SelectOption<number | string | null> | undefined =>
+  $: if (options.length === 0) {
+    showSuggestions = false;
+  }
+
+  const getSelectedOption = (value: string): SelectOption<number> | undefined =>
     filteredSuggestions.find((item) => item.label === value.trim());
 
-  const handleSelectOption = (option: SelectOption<number | string | null>) => {
+  const handleSelectOption = (option: SelectOption<number>) => {
     selectedOption = option;
     dispatch("selectOption", selectedOption);
-    showSuggestions = false;
   };
 
   const handleClickOption = (optionValue: string) => {
     const foundOption = getSelectedOption(optionValue);
 
     if (foundOption) {
-      value = foundOption.label;
+      value = "";
       handleSelectOption(foundOption);
     }
     showSuggestions = false;
   };
 
   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;
+    listBoxHasFocus = false;
   };
 
   const manageKeyboardInterractions = (e: KeyboardEvent) => {
@@ -109,12 +135,18 @@
             return;
           }
 
+          // if the listbox is not displayed, clears the textbox.
+
+          if (!showSuggestions) {
+            textBoxHasFocus = true;
+            value = "";
+          }
           break;
 
         case "ArrowDown":
           // If the textbox is not empty and the listbox is displayed, moves visual focus to the first suggested value.
           textBoxHasFocus = false;
-
+          listBoxHasFocus = true;
           if (value && showSuggestions) {
             currentLiIndex = 0;
           }
@@ -140,6 +172,7 @@
           if (!value && !showSuggestions) {
             textBoxHasFocus = false;
             showSuggestions = true;
+            listBoxHasFocus = true;
             currentLiIndex = options.length - 1;
           }
 
@@ -173,7 +206,7 @@
             const foundOption = getSelectedOption(selectedSuggestionItem);
 
             if (foundOption) {
-              value = foundOption.label;
+              value = "";
               showSuggestions = false;
               handleSelectOption(foundOption);
             }
@@ -185,26 +218,28 @@
 
         case "Escape":
           /**
-           * 
-  
-              Closes the listbox.
-              Sets visual focus on the textbox.
-  
-          */
+         * 
+
+            Closes the listbox.
+            Sets visual focus on the textbox.
+
+        */
 
           showSuggestions = false;
+          listBoxHasFocus = false;
           textBoxHasFocus = true;
           break;
 
         /**
-             * 
-                Moves visual focus to the next option.
-                If visual focus is on the last option, moves visual focus to the first option.
-                Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-  
-            */
+           * 
+              Moves visual focus to the next option.
+              If visual focus is on the last option, moves visual focus to the first option.
+              Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
+
+          */
 
         case "ArrowDown":
+          listBoxHasFocus = true;
           currentLiIndex += 1;
 
           if (currentLiIndex === suggestionItems.length) {
@@ -213,13 +248,14 @@
           break;
 
         case "ArrowUp":
+          listBoxHasFocus = true;
           /**
-             * 
-                Moves visual focus to the previous option.
-                If visual focus is on the first option, moves visual focus to the last option.
-                Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-  
-            */
+           * 
+              Moves visual focus to the previous option.
+              If visual focus is on the first option, moves visual focus to the last option.
+              Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
+
+          */
           if (currentLiIndex === 0) {
             currentLiIndex = suggestionItems.length - 1;
           } else {
@@ -228,16 +264,18 @@
           break;
         case "ArrowRight":
           /**
-             * 
-              Moves visual focus to the textbox and moves the editing cursor one character to the right.
-  
-            */
+           * 
+            Moves visual focus to the textbox and moves the editing cursor one character to the right.
+
+          */
+          listBoxHasFocus = false;
           textBoxHasFocus = true;
           break;
         case "ArrowLeft":
           /**
            *  	Moves visual focus to the textbox and moves the editing cursor one character to the left.
            */
+          listBoxHasFocus = false;
           textBoxHasFocus = true;
           break;
         default:
@@ -245,11 +283,6 @@
       }
     }
   };
-
-  const handleFocusIn = () => {
-    showSuggestions = true;
-    textBoxHasFocus = false;
-  };
 </script>
 
 <div class="fr-input-group dropdown" class:fr-input-group--error={error}>
@@ -274,6 +307,7 @@
       class:inputOutline={textBoxHasFocus}
       type="text"
       {name}
+      id={name}
       {value}
       required
       role="combobox"
@@ -287,21 +321,23 @@
         ? `suggestion-item-${currentLiIndex}`
         : null}
       on:input={handleInput}
-      on:focus={handleFocusIn}
-      on:focusout
+      on:focus={handleInputFocused}
+      on:focusout={() => {
+        textBoxHasFocus = false;
+        showSuggestions = false;
+      }}
     />
-
-    <slot name="add-item" />
   </div>
 
   <ul
     bind:this={suggestionList}
+    tabindex="-1"
     class:hide={!showSuggestions}
     class="fr-raw-list dropdown--list"
     id={`${name}-suggestions`}
     role="listbox"
     aria-label="Formats de données"
-    class:suggestionlist--focused={!textBoxHasFocus}
+    class:suggestionlist--focused={listBoxHasFocus}
   >
     {#each filteredSuggestions as { label }, index}
       <li
@@ -352,7 +388,12 @@
 
   .dropdown--list {
     width: 100%;
-    height: 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 {
diff --git a/client/src/lib/util/datasetFilters.test.ts b/client/src/lib/util/datasetFilters.test.ts
index 40a5e20e..10428f32 100644
--- a/client/src/lib/util/datasetFilters.test.ts
+++ b/client/src/lib/util/datasetFilters.test.ts
@@ -6,8 +6,35 @@ import type {
 import { getFakeOrganization } from "src/tests/factories/organizations";
 import { buildFakeTag } from "src/tests/factories/tags";
 import { buildActiveFiltersMap, getActiveFiltersCount } from "./datasetFilters";
+import type { ExtraFieldValue } from "src/definitions/catalogs";
+import type {
+  BoolExtraField,
+  EnumExtraField,
+} from "src/definitions/extraField";
 
 test("buildActiveFiltersMap", () => {
+  const extraField1: EnumExtraField = {
+    id: "1234",
+    name: "my name",
+    title: "my title",
+    hintText: "my-text",
+    type: "ENUM",
+    data: {
+      values: ["my-extra-field"],
+    },
+  };
+
+  const extraField2: BoolExtraField = {
+    id: "4567",
+    name: "my name",
+    title: "my title",
+    hintText: "my-text",
+    type: "BOOL",
+    data: {
+      trueValue: "OUI",
+      falseValue: "NON",
+    },
+  };
   const filtersInfos: DatasetFiltersInfo = {
     organizationSiret: [
       getFakeOrganization({
@@ -35,10 +62,20 @@ test("buildActiveFiltersMap", () => {
         name: "tata",
       }),
     ],
-    extraFields: [],
+    extraFields: [extraField1, extraField2],
     license: ["malicence", "AGPL"],
   };
 
+  const extraFieldValue1: ExtraFieldValue = {
+    extraFieldId: "1234",
+    value: "my-extra-field",
+  };
+
+  const extraFieldValue2: ExtraFieldValue = {
+    extraFieldId: "4567",
+    value: "Non",
+  };
+
   const filtersValue: DatasetFiltersValue = {
     organizationSiret: "1234",
     geographicalCoverage: "oversea",
@@ -47,7 +84,7 @@ test("buildActiveFiltersMap", () => {
     technicalSource: "ADEME",
     tagId: "122",
     license: "AGPL",
-    extraFieldValues: null,
+    extraFieldValues: [extraFieldValue1, extraFieldValue2],
   };
 
   const expectedResult: ActiveDatasetFiltersMap = {
@@ -79,6 +116,18 @@ test("buildActiveFiltersMap", () => {
       key: "Licence",
       value: "AGPL",
     },
+    extraFieldValues: [
+      {
+        id: extraField1.id,
+        key: extraField1.title,
+        value: extraFieldValue1.value,
+      },
+      {
+        id: extraField2.id,
+        key: extraField2.title,
+        value: extraFieldValue2.value,
+      },
+    ],
   };
 
   const result = buildActiveFiltersMap(filtersInfos, filtersValue);
@@ -100,9 +149,19 @@ test("getActiveFiltersMap", () => {
       key: "Service Producteur de la donnée",
       value: "DGIFP",
     },
+    extraFieldValues: [
+      {
+        key: "my extra field",
+        value: 66,
+      },
+      {
+        key: "myExtra field 2",
+        value: "67",
+      },
+    ],
   };
 
   const result = getActiveFiltersCount(map);
 
-  expect(result).toEqual(3);
+  expect(result).toEqual(5);
 });
diff --git a/client/src/lib/util/datasetFilters.ts b/client/src/lib/util/datasetFilters.ts
index 06067c29..6e2c9b5c 100644
--- a/client/src/lib/util/datasetFilters.ts
+++ b/client/src/lib/util/datasetFilters.ts
@@ -1,8 +1,34 @@
+import type { ExtraFieldValue } from "src/definitions/catalogs";
 import type {
   ActiveDatasetFiltersMap,
+  BasicMap,
   DatasetFiltersInfo,
   DatasetFiltersValue,
 } from "src/definitions/datasetFilters";
+import type { ExtraField } from "src/definitions/extraField";
+
+const getExtraFieldValuesFiltersMap = (
+  extraFields: ExtraField[],
+  extraFieldValues: ExtraFieldValue[]
+): BasicMap[] => {
+  return extraFieldValues.reduce((prev, next) => {
+    const foundExtraField = extraFields.find(
+      (item) => item.id === next.extraFieldId
+    );
+
+    if (!foundExtraField) {
+      return prev;
+    }
+    return [
+      ...prev,
+      {
+        id: foundExtraField.id,
+        key: foundExtraField.title,
+        value: next.value,
+      },
+    ];
+  }, [] as BasicMap[]);
+};
 
 export const buildActiveFiltersMap = (
   filtersInfo: DatasetFiltersInfo,
@@ -60,8 +86,35 @@ export const buildActiveFiltersMap = (
           value: filtersValue.license,
         }
       : undefined,
+    extraFieldValues: filtersValue.extraFieldValues
+      ? getExtraFieldValuesFiltersMap(
+          filtersInfo.extraFields,
+          filtersValue.extraFieldValues
+        )
+      : undefined,
   };
 };
 
-export const getActiveFiltersCount = (map: ActiveDatasetFiltersMap): number =>
-  Object.entries(map).reduce((prev, next) => (next[1] ? prev + 1 : prev), 0);
+export const getActiveFiltersCount = (map: ActiveDatasetFiltersMap): number => {
+  return Object.entries(map).reduce((prev, next) => {
+    if (!next[1]) {
+      return prev;
+    }
+    if (Array.isArray(next[1])) {
+      return next[1].length + prev;
+    }
+    return 1 + prev;
+  }, 0);
+};
+
+export const removeNonExistingFiltersValue = (
+  filtersValues: DatasetFiltersValue
+): DatasetFiltersValue => {
+  return Object.entries(filtersValues).reduce((prev, next) => {
+    if (next[1]) {
+      return { ...prev, [next[0]]: next[1] };
+    }
+
+    return prev;
+  }, {} as DatasetFiltersValue);
+};
diff --git a/client/src/routes/(app)/fiches/[id]/+page.ts b/client/src/routes/(app)/fiches/[id]/+page.ts
index f45a4376..506bc0f4 100644
--- a/client/src/routes/(app)/fiches/[id]/+page.ts
+++ b/client/src/routes/(app)/fiches/[id]/+page.ts
@@ -26,9 +26,9 @@ export const load: PageLoad = async ({ fetch, params }) => {
     );
 
     return {
-      title: `${
+      title: `${SITE_TITLE} -  ${
         Maybe.Some(dataset) ? dataset.title : "Fiche de jeu de données"
-      } - ${SITE_TITLE}`,
+      }`,
       catalog,
       dataset,
     };
diff --git a/client/src/routes/(app)/fiches/search/+page.svelte b/client/src/routes/(app)/fiches/search/+page.svelte
index 8d1fd5db..8a91df93 100644
--- a/client/src/routes/(app)/fiches/search/+page.svelte
+++ b/client/src/routes/(app)/fiches/search/+page.svelte
@@ -19,6 +19,7 @@
   import {
     buildActiveFiltersMap,
     getActiveFiltersCount,
+    removeNonExistingFiltersValue,
   } from "src/lib/util/datasetFilters";
 
   export let data: PageData;
@@ -50,7 +51,7 @@
 
   const handleFilterChange = async (filtersValues: DatasetFiltersValue) => {
     const href = patchQueryString($pageStore.url.searchParams, [
-      ...toFiltersParams(filtersValues),
+      ...toFiltersParams(removeNonExistingFiltersValue(filtersValues)),
       makePageParam(1),
     ]);
     goto(href, { noscroll: true });
@@ -62,6 +63,21 @@
       [key]: null,
     });
   };
+
+  const handleClickExtraFieldActiveFilter = (extrafieldId?: string) => {
+    if (!filtersValue.extraFieldValues || !extrafieldId) {
+      return;
+    }
+
+    const newExtraFieldsValues = filtersValue.extraFieldValues.filter(
+      (item) => item.extraFieldId !== extrafieldId
+    );
+
+    handleFilterChange({
+      ...filtersValue,
+      extraFieldValues: newExtraFieldsValues,
+    });
+  };
 </script>
 
 <section class="fr-background-alt--grey fr-mb-6w">
@@ -121,6 +137,8 @@
       <div class="fr-col-5 summary__header__buttons">
         <button
           on:click={() => (displayFilters = !displayFilters)}
+          aria-controls="search-filters"
+          aria-expanded={displayFilters}
           class="fr-btn fr-btn--secondary fr-btn--icon-right"
           class:fr-icon-arrow-down-s-line={!displayFilters}
           class:fr-icon-arrow-up-s-line={displayFilters}
@@ -135,17 +153,30 @@
     {#if activeFiltersCount > 0}
       <div class="fr-grid-row fr-py-2w bottom_line">
         <div class="fr-col-12">
-          <h4 class="fr-h6">Filtres actifs</h4>
+          <h2 class="fr-h6">Filtres actifs</h2>
           <div role="list">
             {#each Object.entries(activeFiltersMap) as [key, map]}
               {#if map}
-                <button
-                  class="fr-tag fr-icon-close-line fr-tag--icon-left"
-                  aria-label={`Retirer ${map.key} : ${map.value}`}
-                  on:click|preventDefault={() => handleClickActiveFilter(key)}
-                >
-                  {`${map.key} : ${map.value}`}
-                </button>
+                {#if Array.isArray(map)}
+                  {#each map as mapItem}
+                    <button
+                      class="fr-tag fr-icon-close-line fr-tag--icon-left"
+                      aria-label={`Retirer le filtre ${mapItem.key} : ${mapItem.value}`}
+                      on:click|preventDefault={() =>
+                        handleClickExtraFieldActiveFilter(mapItem.id)}
+                    >
+                      {`${mapItem.key} : ${mapItem.value}`}
+                    </button>
+                  {/each}
+                {:else}
+                  <button
+                    class="fr-tag fr-icon-close-line fr-tag--icon-left"
+                    aria-label={`Retirer ${map.key} : ${map.value}`}
+                    on:click|preventDefault={() => handleClickActiveFilter(key)}
+                  >
+                    {`${map.key} : ${map.value}`}
+                  </button>
+                {/if}
               {/if}
             {/each}
           </div>
@@ -155,6 +186,7 @@
 
     {#if Maybe.Some(filtersInfo) && displayFilters}
       <FilterPanel
+        id="filter-panel"
         on:change={(e) => handleFilterChange(e.detail)}
         info={filtersInfo}
         value={filtersValue}
@@ -175,10 +207,6 @@
 </section>
 
 <style>
-  .bottom_line {
-    border-bottom: 1px solid var(--border-default-grey);
-  }
-
   .summary__header__buttons {
     display: flex;
     flex-direction: column;
diff --git a/client/src/routes/(app)/fiches/search/+page.ts b/client/src/routes/(app)/fiches/search/+page.ts
index 5e2cccfd..273727ed 100644
--- a/client/src/routes/(app)/fiches/search/+page.ts
+++ b/client/src/routes/(app)/fiches/search/+page.ts
@@ -28,7 +28,7 @@ export const load: PageLoad = async ({ fetch, url }) => {
   ]);
 
   return {
-    title: `Rechercher un jeu de données - ${SITE_TITLE}`,
+    title: `${SITE_TITLE} - Rechercher un jeu de données`,
     paginatedDatasets,
     filtersInfo,
     filtersValue,
diff --git a/client/src/routes/(app)/fiches/search/_FilterPanel.svelte b/client/src/routes/(app)/fiches/search/_FilterPanel.svelte
index 5dfd956f..ebd81054 100644
--- a/client/src/routes/(app)/fiches/search/_FilterPanel.svelte
+++ b/client/src/routes/(app)/fiches/search/_FilterPanel.svelte
@@ -27,6 +27,7 @@
 
   export let info: DatasetFiltersInfo;
   export let value: DatasetFiltersValue;
+  export let id: string;
 
   const createOrganizationSiretToNameMap = (
     organizations: Organization[]
@@ -71,11 +72,6 @@
       (item) => item.extraFieldId === extraField.id
     );
 
-    console.log({
-      extraFieldName: extraField.name,
-      result: result,
-    });
-
     return result?.value;
   };
 
@@ -164,9 +160,9 @@
   };
 </script>
 
-<div data-test-id="filter-panel" class="fr-mt-2w">
+<div data-test-id="filter-panel" {id} class="fr-mt-2w">
   <section class="">
-    <h3 class="fr-h6">Champs communs</h3>
+    <h2 class="fr-h6">Champs communs</h2>
 
     <div class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col-4">
@@ -174,6 +170,7 @@
           <TextSearchFilter
             label="Couverture géographique"
             options={filtersOptions.geographicalCoverage}
+            selected={!!buttonTexts.geographicalCoverage}
             buttonText={buttonTexts.geographicalCoverage}
             on:selectOption={(e) =>
               handleSelectFilter("geographicalCoverage", e)}
@@ -182,6 +179,7 @@
         <div class="fr-mb-2w">
           <TextSearchFilter
             label="Service producteur de la donnée"
+            selected={!!buttonTexts.service}
             options={filtersOptions.service}
             buttonText={buttonTexts.service}
             on:selectOption={(e) => handleSelectFilter("service", e)}
@@ -192,6 +190,7 @@
           <TextSearchFilter
             label="Licence de réutilisation"
             options={filtersOptions.license}
+            selected={!!buttonTexts.license}
             buttonText={buttonTexts.license}
             on:selectOption={(e) => handleSelectFilter("license", e)}
           />
@@ -203,6 +202,7 @@
           <TextSearchFilter
             label="Format de mise à disposition"
             options={filtersOptions.formatId}
+            selected={!!buttonTexts.formatId}
             buttonText={buttonTexts.formatId}
             on:selectOption={(e) => handleSelectFilter("formatId", e)}
           />
@@ -213,6 +213,7 @@
             label="Système d'information source"
             options={filtersOptions.technicalSource}
             buttonText={buttonTexts.technicalSource}
+            selected={!!buttonTexts.technicalSource}
             on:selectOption={(e) => handleSelectFilter("technicalSource", e)}
           />
         </div>
@@ -224,6 +225,7 @@
             label="Mot-clé"
             options={filtersOptions.tagId}
             buttonText={buttonTexts.tagId}
+            selected={!!buttonTexts.tagId}
             on:selectOption={(e) => handleSelectFilter("tagId", e)}
           />
         </div>
@@ -231,9 +233,10 @@
     </div>
   </section>
 </div>
+
 {#if info.extraFields.length > 0}
-  <section class="fr-mt-2w">
-    <h6>Champs complémentaires</h6>
+  <section class="fr-my-2w bottom_line-">
+    <h2 class="fr-h6">Champs complémentaires</h2>
     <div class="filter-row">
       {#each extraFields as extraField}
         <div class="filter-col fr-mt-2w">
@@ -242,6 +245,7 @@
               label={extraField.title}
               options={transformBooleanExtraFieldToSelectOption(extraField)}
               buttonText={getExtraFieldButtonText(extraField)}
+              selected={!!getExtraFieldButtonText(extraField)}
               on:selectOption={(e) =>
                 handleExtraFieldValueChange(extraField.id, `${e.detail.value}`)}
             />
@@ -251,6 +255,7 @@
             <TextSearchFilter
               label={extraField.title}
               buttonText={getExtraFieldButtonText(extraField)}
+              selected={!!getExtraFieldButtonText(extraField)}
               options={transformEnumExtraFieldToSelectOption(extraField)}
               on:selectOption={(e) =>
                 handleExtraFieldValueChange(extraField.id, `${e.detail.value}`)}
diff --git a/client/src/tests/e2e/a11y.spec.ts b/client/src/tests/e2e/a11y.spec.ts
index 2e2d7210..a91e87c4 100644
--- a/client/src/tests/e2e/a11y.spec.ts
+++ b/client/src/tests/e2e/a11y.spec.ts
@@ -46,4 +46,15 @@ test.describe("accessibilty - pages with required authentication", () => {
     const accessibilityScanResults = await makeAxeBuilder().analyze();
     expect(accessibilityScanResults.violations).toEqual([]);
   });
+
+  test.use({ storageState: STATE_AUTHENTICATED });
+  test("search page should not have any automatically detectable accessibility issues", async ({
+    page,
+    makeAxeBuilder,
+  }) => {
+    await page.goto("/fiches/search");
+
+    const accessibilityScanResults = await makeAxeBuilder().analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
 });
diff --git a/client/src/tests/e2e/contribuer.spec.ts b/client/src/tests/e2e/contribuer.spec.ts
index 64ae1e94..3e12f106 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.data.gouv.fr"
+      "Contribuer une fiche de jeu de données - Catalogue"
     );
 
     await page.locator("text=Ministère de la Culture").waitFor();
diff --git a/client/src/tests/e2e/datapass.spec.ts b/client/src/tests/e2e/datapass.spec.ts
index fca359db..b754678f 100644
--- a/client/src/tests/e2e/datapass.spec.ts
+++ b/client/src/tests/e2e/datapass.spec.ts
@@ -8,7 +8,7 @@ test.describe("Datapass", () => {
   }) => {
     await page.goto("/auth/datapass/create-organization");
     await expect(page).toHaveTitle(
-      "Connexion avec MonComptePro : aucune organisation enregistrée - catalogue.data.gouv.fr"
+      "Connexion avec MonComptePro : aucune organisation enregistrée - Catalogue"
     );
 
     await page
@@ -52,7 +52,7 @@ test.describe("Datapass", () => {
       )}`
     );
     await expect(page).toHaveTitle(
-      "Connexion avec MonComptePro : choisir une organisation - catalogue.data.gouv.fr"
+      "Connexion avec MonComptePro : choisir une organisation - Catalogue"
     );
 
     await page
diff --git a/client/src/tests/e2e/details.spec.ts b/client/src/tests/e2e/details.spec.ts
index 7994504f..1e8c5a59 100644
--- a/client/src/tests/e2e/details.spec.ts
+++ b/client/src/tests/e2e/details.spec.ts
@@ -8,9 +8,7 @@ test.describe("Dataset details", () => {
 
     test("Displays dataset details", async ({ page, dataset }) => {
       await page.goto(`/fiches/${dataset.id}`);
-      await expect(page).toHaveTitle(
-        `${dataset.title} - catalogue.data.gouv.fr`
-      );
+      await expect(page).toHaveTitle(`Catalogue - ${dataset.title}`);
 
       const title = page.locator("h1");
       await expect(title).toHaveText(dataset.title);
diff --git a/client/src/tests/e2e/edit.spec.ts b/client/src/tests/e2e/edit.spec.ts
index b9d9e48a..6c19fbac 100644
--- a/client/src/tests/e2e/edit.spec.ts
+++ b/client/src/tests/e2e/edit.spec.ts
@@ -15,7 +15,7 @@ test.describe("Edit dataset", () => {
   test("Visits the edit page", async ({ page, dataset }) => {
     await page.goto(`/fiches/${dataset.id}/edit`);
     await expect(page).toHaveTitle(
-      "Modifier la fiche de jeu de données - catalogue.data.gouv.fr"
+      "Modifier la fiche de jeu de données - Catalogue"
     );
 
     await page.locator("text=Ministère de la Culture").waitFor();
diff --git a/client/src/tests/e2e/home.spec.ts b/client/src/tests/e2e/home.spec.ts
index 8ca4d8ab..36d9f773 100644
--- a/client/src/tests/e2e/home.spec.ts
+++ b/client/src/tests/e2e/home.spec.ts
@@ -5,7 +5,7 @@ import { test } from "./fixtures.js";
 test.describe("Landing Page", () => {
   test("Visits the home page without being logged in", async ({ page }) => {
     await page.goto("/");
-    await expect(page).toHaveTitle("Accueil - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Accueil - Catalogue");
     await page
       .locator(
         "text=Bienvenue sur le service de catalogage de données de l’État"
diff --git a/client/src/tests/e2e/login.spec.ts b/client/src/tests/e2e/login.spec.ts
index cac3b867..b979e1a7 100644
--- a/client/src/tests/e2e/login.spec.ts
+++ b/client/src/tests/e2e/login.spec.ts
@@ -20,7 +20,7 @@ test.describe("Login", () => {
 
   test("Logs in", async ({ page }) => {
     await page.goto("/login");
-    await expect(page).toHaveTitle("Connexion - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Connexion - Catalogue");
 
     const email = page.locator("form [name=email]");
     await email.fill(TEST_EMAIL);
diff --git a/client/src/tests/e2e/search.spec.ts b/client/src/tests/e2e/search.spec.ts
index 71601cf1..d28c58a2 100644
--- a/client/src/tests/e2e/search.spec.ts
+++ b/client/src/tests/e2e/search.spec.ts
@@ -40,9 +40,7 @@ test.describe("Search", () => {
 
   test("Search page meta", async ({ page }) => {
     await page.goto("/fiches/search");
-    await expect(page).toHaveTitle(
-      "Rechercher un jeu de données - catalogue.data.gouv.fr"
-    );
+    await expect(page).toHaveTitle("Catalogue - Rechercher un jeu de données");
   });
 
   test("Performs a search from the home page", async ({ page, dataset }) => {
@@ -55,9 +53,6 @@ test.describe("Search", () => {
     expect(items[0].title).toBe(dataset.title);
 
     await expect(page).toHaveURL("/fiches/search?q=title");
-    await page
-      .locator(`text=/${items.length} fiche(s)? de données/i`)
-      .waitFor();
     await page.locator(`:has-text('${dataset.title}')`).first().waitFor();
   });
 
@@ -94,9 +89,6 @@ test.describe("Search", () => {
     expect(items[0].title).toBe(dataset.title);
 
     await expect(page).toHaveURL("/fiches/search?q=title&page=1");
-    await page
-      .locator(`text=/${items.length} fiche(s)? de données/i`)
-      .waitFor();
     await page.locator(`:has-text('${dataset.title}')`).first().waitFor();
 
     // Second search. Aim at getting no results.
@@ -123,7 +115,6 @@ test.describe("Search", () => {
     await page.goto(`/fiches/search?q=${dataset.title}`);
     const search = page.locator("form [name=q]");
     expect(await search.inputValue()).toBe(dataset.title);
-    await page.locator(`text=/fiche(s)? de données/i`).waitFor();
     await page.locator(`:has-text('${dataset.title}')`).first().waitFor();
   });
 
@@ -143,17 +134,12 @@ test.describe("Search filters", () => {
 
     const filterPanel = page.locator("[data-test-id='filter-panel']");
 
-    expect(await filterPanel.locator("h6").count()).toBe(4);
-    await filterPanel.locator("text=Informations générales").waitFor();
-    await filterPanel.locator("text=Catalogues").waitFor();
-    await filterPanel.locator("text=Sources et formats").waitFor();
-    await filterPanel.locator("text=Mots-clés thématiques").waitFor();
+    await filterPanel.locator("text=Champs communs").waitFor();
 
-    expect(await filterPanel.locator("button").count()).toBe(7);
+    expect(await filterPanel.locator("button").count()).toBe(6);
     await filterPanel.locator("text=Couverture géographique").waitFor();
     await filterPanel.locator("text=Service producteur de la donnée").waitFor();
     await filterPanel.locator("text=Licence de réutilisation").waitFor();
-    await filterPanel.locator("text='Catalogue'").waitFor();
     await filterPanel.locator("text=Format de mise à disposition").waitFor();
     await filterPanel.locator("text=Système d'information source").waitFor();
     await filterPanel.locator("text=Mot-clé").waitFor();
diff --git a/client/src/tests/e2e/static.spec.ts b/client/src/tests/e2e/static.spec.ts
index f62aea64..29fb8f96 100644
--- a/client/src/tests/e2e/static.spec.ts
+++ b/client/src/tests/e2e/static.spec.ts
@@ -6,7 +6,7 @@ test.describe("Static pages", () => {
     await page.goto("/");
     await page.click("text=Mentions légales");
 
-    await expect(page).toHaveTitle("Mentions légales - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Mentions légales - Catalogue");
     await expect(
       page.locator("role=heading[level=1] >> text=Mentions légales")
     ).toBeVisible();
@@ -16,7 +16,7 @@ test.describe("Static pages", () => {
     await page.goto("/");
     await page.click("text=Vie privée");
 
-    await expect(page).toHaveTitle("Vie privée - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Vie privée - Catalogue");
     await expect(
       page.locator("role=heading[level=1] >> text=Vie privée")
     ).toBeVisible();
@@ -26,9 +26,7 @@ test.describe("Static pages", () => {
     await page.goto("/");
     await page.click("text=Accessibilité: non conforme");
 
-    await expect(page).toHaveTitle(
-      "Déclaration accessibilité  - catalogue.data.gouv.fr"
-    );
+    await expect(page).toHaveTitle("Déclaration accessibilité  - Catalogue");
   });
 
   test("Visits the '404' page", async ({ page }) => {
diff --git a/server/api/app.py b/server/api/app.py
index 7b51bfb8..e47f1207 100644
--- a/server/api/app.py
+++ b/server/api/app.py
@@ -26,7 +26,7 @@ def create_app(settings: Settings = None) -> App:
 
     app = App(
         debug=settings.debug,
-        title="API - catalogue.data.gouv.fr",
+        title="API - Catalogue",
         version="0.1.0",  # Required by FastAPI, but meaningless for now.
         docs_url=settings.docs_url,
     )