From 617748ae56fe3086583c7330d0b8007ea9521833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 19 Apr 2024 10:38:11 +0200
Subject: [PATCH] =?UTF-8?q?THE-1268=20focus=20apr=C3=A8s=20lancement=20rec?=
 =?UTF-8?q?herche?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/results/ResultComponents.vue       | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/components/common/results/ResultComponents.vue b/components/common/results/ResultComponents.vue
index c64a3220..52944ed9 100644
--- a/components/common/results/ResultComponents.vue
+++ b/components/common/results/ResultComponents.vue
@@ -12,23 +12,25 @@
       </CommonResultsSortingSelect>
     </div>
     <Transition mode="out-in">
-      <div class="returned-results-statement" v-if="dataReady">
-        <h1>
-          <span>{{ $t("results.searched") }}{{ '\xa0' }}</span>
-          <span class="darker-text">"{{ persistentQuery }}"{{ '\xa0' }}</span>
-          <span>{{ $t("results.returned") }}{{ '\xa0' }}</span>
-          <span class="darker-text">{{ nbResult.toLocaleString("fr-FR") }}{{ '\xa0' }}</span>
-          <span>{{ $t("results.results") }}</span>
-          <div class="export-buttons">
-            <CommonExportQueryButton v-if="domainNameChange == 'theses'"
-              :csv-href="'/api/v1/theses/rechercheCSV' + '?q=' + encodeURIComponent(replaceAndEscape(persistentQuery, isAdvanced)) + '&tri=' + encodeURIComponent(currentRoute.query.tri) + getFacetsRequest()"
-              :rss-href="'/api/v1/theses/rss' + '?q=' + encodeURIComponent(replaceAndEscape(persistentQuery, isAdvanced)) + getFacetsRequest()"
-              :json-href="'/api/v1/theses/recherche/' + '?q=' + encodeURIComponent(replaceAndEscape(persistentQuery, isAdvanced)) + '&nombre=10000&tri=' + encodeURIComponent(currentRoute.query.tri) + getFacetsRequest()">
-            </CommonExportQueryButton>
-          </div>
-        </h1>
+      <div id="returned-results-statement-container" aria-labelledby="returned-results-statement" tabindex="0" ref="returnStatementDiv">
+        <div id="returned-results-statement" v-if="dataReady">
+          <h2>
+            <span>{{ $t("results.searched") }}{{ '\xa0' }}</span>
+            <span class="darker-text">"{{ persistentQuery }}"{{ '\xa0' }}</span>
+            <span>{{ $t("results.returned") }}{{ '\xa0' }}</span>
+            <span class="darker-text">{{ nbResult.toLocaleString("fr-FR") }}{{ '\xa0' }}</span>
+            <span>{{ $t("results.results") }}</span>
+            <div class="export-buttons">
+              <CommonExportQueryButton v-if="domainNameChange == 'theses'"
+                :csv-href="'/api/v1/theses/rechercheCSV' + '?q=' + encodeURIComponent(replaceAndEscape(persistentQuery, isAdvanced)) + '&tri=' + encodeURIComponent(currentRoute.query.tri) + getFacetsRequest()"
+                :rss-href="'/api/v1/theses/rss' + '?q=' + encodeURIComponent(replaceAndEscape(persistentQuery, isAdvanced)) + getFacetsRequest()"
+                :json-href="'/api/v1/theses/recherche/' + '?q=' + encodeURIComponent(replaceAndEscape(persistentQuery, isAdvanced)) + '&nombre=10000&tri=' + encodeURIComponent(currentRoute.query.tri) + getFacetsRequest()">
+              </CommonExportQueryButton>
+            </div>
+          </h2>
+        </div>
+        <h2 id="returned-results-statement" v-else>{{ $t("results.searching") }}</h2>
       </div>
-      <h2 class="returned-results-statement" v-else>{{ $t("results.searching") }}</h2>
     </Transition>
 
     <CommonResultsFacetsChips :selected-facets-array="selectedFacetsArray"
@@ -59,8 +61,7 @@
 
 <script setup>
 import { useDisplay } from "vuetify";
-import { ref, watch } from "vue";
-
+import { onMounted, ref, watch } from "vue";
 
 const currentRoute = useRoute();
 const { mobile } = useDisplay();
@@ -102,6 +103,12 @@ const currentPageNumber = currentRoute.query.page ? ref(parseInt(currentRoute.qu
 const currentShowingNumber = currentRoute.query.nb ? ref(parseInt(currentRoute.query.nb)) : ref(10);
 const isAdvanced = useState("isAdvanced");
 
+const returnStatementDiv = ref(null);
+
+onMounted (() => {
+  returnStatementDiv.value.focus({ focusVisible: false});
+});
+
 /**
  * Fonctions
  */
@@ -146,6 +153,10 @@ function reinitializePageNumber() {
 watch(() => props.resetPage, () => {
   currentPageNumber.value = 1;
 });
+
+watch(() => props.dataReady, () => {
+  returnStatementDiv.value.focus({ focusVisible: false});
+});
 </script>
 
 <style scoped lang="scss">
@@ -199,10 +210,10 @@ watch(() => props.resetPage, () => {
   opacity: 0;
 }
 
-.returned-results-statement {
+#returned-results-statement {
   display: inline-block;
 
-  h1 {
+  h2 {
     display: inline-block;
     margin: 0 1rem 0 1rem;
     font-family: Roboto-Medium, sans-serif;