[a11y] improve search page (#600)

etalab · May 4, 2023 · bcfab77 · bcfab77
1 parent 1082e15
commit bcfab77
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/client/src/lib/components/Header/Header.svelte b/client/src/lib/components/Header/Header.svelte
@@ -3,7 +3,6 @@
   import { page } from "$app/stores";
   import { logout, account } from "$lib/stores/auth";
   import { navigationItems } from "$lib/stores/layout/navigation";
-  import { SITE_TITLE } from "src/constants";
   import { Maybe } from "$lib/util/maybe";
 
   $: path = $page.url.pathname;
@@ -47,8 +46,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/routes/(app)/fiches/search/+page.svelte b/client/src/routes/(app)/fiches/search/+page.svelte
@@ -137,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}
@@ -151,15 +153,15 @@
     {#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}
                 {#if Array.isArray(map)}
                   {#each map as mapItem}
                     <button
                       class="fr-tag fr-icon-close-line fr-tag--icon-left"
-                      aria-label={`Retirer ${mapItem.key} : ${mapItem.value}`}
+                      aria-label={`Retirer le filtre ${mapItem.key} : ${mapItem.value}`}
                       on:click|preventDefault={() =>
                         handleClickExtraFieldActiveFilter(mapItem.id)}
                     >
@@ -184,6 +186,7 @@
 
     {#if Maybe.Some(filtersInfo) && displayFilters}
       <FilterPanel
+        id="filter-panel"
         on:change={(e) => handleFilterChange(e.detail)}
         info={filtersInfo}
         value={filtersValue}

diff --git 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[]
@@ -159,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">
@@ -235,7 +236,7 @@
 
 {#if info.extraFields.length > 0}
   <section class="fr-my-2w bottom_line-">
-    <h6>Champs complémentaires</h6>
+    <h2 class="fr-h6">Champs complémentaires</h2>
     <div class="filter-row">
       {#each extraFields as extraField}
         <div class="filter-col fr-mt-2w">