THE-1268 focus après lancement recherche

abes-esr · Apr 19, 2024 · 617748a · 617748a
1 parent 81fa1ab
commit 617748a
Showing 1 changed file with 31 additions and 20 deletions.
diff --git 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;