THE-1268 focus sur la modale a l'ouverture + retour focus au bouton a…

… la fermeture
abes-esr · Apr 22, 2024 · fcb3ff6 · fcb3ff6
1 parent 617748a
commit fcb3ff6
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 16 deletions.
diff --git a/app.vue b/app.vue
@@ -1,6 +1,9 @@
 <template>
   <v-theme-provider theme="colorMode">
     <v-app :class="{ 'opendys': opendys, 'interlignes': interlignes, 'justification': justification }">
+      <div tabindex="0"  ref="skipLink">
+        <a href="#searchbar" class="skiplink">{{ $t('skip') }}</a>
+      </div>
       <CommonHeaderCustom></CommonHeaderCustom>
       <v-main>
         <NuxtPage></NuxtPage>
@@ -46,6 +49,7 @@ const themesNames = ref({
 });
 
 const { mobile } = useDisplay();
+const skipLink =ref(null);
 
 const colorMode = useColorMode({
   onChanged(color) {
@@ -54,6 +58,7 @@ const colorMode = useColorMode({
 });
 
 onMounted(() => {
+  skipLink.value.focus({focusVisible: false});
   opendys.value = getFromLocalStorage("opendys", false);
   interlignes.value = getFromLocalStorage("interlignes", false);
   justification.value = getFromLocalStorage("justification", false);
@@ -528,4 +533,16 @@ a:active {
   text-decoration: none;
   font-weight: 500;
 }
+
+.skiplink:not(:focus) {
+  position: fixed;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 </style>
diff --git a/components/common/Keywords.vue b/components/common/Keywords.vue
@@ -10,19 +10,25 @@
       </div>
       <div class="thesis-keywords" v-if="type === 'theses'">
         <div class="mots-cles-controlles" v-if="rameauKeywords.length > 0">
-          <div class="subtitle">
-            <h3>{{ $t("motCleControle") }}</h3>
-            <v-btn class="info-button" flat title="Informations sur les mots clés">
+          <div  tabindex="0" ref="backFromKeywordModal" aria-labelledby="mots-cles-controles-header" class="subtitle">
+            <h3 id="mots-cles-controles-header">{{ $t("motCleControle") }}</h3>
+            <v-btn class="info-button" @click="overlayIsOpened = !overlayIsOpened" flat title="Informations sur les mots clés">
               <v-icon size="22">mdi-information-outline</v-icon>
               <span class="sr-only">Informations sur les mots clés</span>
             </v-btn>
-            <v-overlay activator=".info-button" location-strategy="connected" scroll-strategy="close">
-              <v-card class="legend-tooltip">
-                <span>
-                  {{ $t("motCleControleDescription") }} <a class="" href='https://www.idref.fr/'>idRef.</a>
-                </span>
-              </v-card>
+            <v-overlay v-model="overlayIsOpened" location-strategy="connected" scroll-strategy="close">
+              <div tabindex="0" id="legend-tooltip">
+                <v-card class="legend-tooltip">
+                  <span>
+                    {{ $t("motCleControleDescription") }} <a class="" href="https://www.idref.fr/">idRef.</a>
+                  </span>
+                  <div class="close-overlay-button-container">
+                    <v-btn @click="overlayIsOpened = !overlayIsOpened" class="close-overlay-button" variant="outlined" density="compact" append-icon="mdi-close-box" flat>{{ $t('access.fermer') }}</v-btn>
+                  </div>
+                </v-card>
+              </div>
             </v-overlay>
+
           </div>
           <div role="list" class="chip-lines v-chip-group" :class="isRtl ? 'rtl-text' : ''">
             <template v-for="keyWord in rameauKeywords" :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword">
@@ -106,6 +112,7 @@ const props = defineProps({
 });
 
 const { mobile } = useDisplay();
+const overlayIsOpened = ref(false);
 
 // Si c'est une these (donc si on a un titre dans l'objet) on affiche plus de keywords
 const numberOfKeywordsPerLine = mobile.value ? ref(6) : props.these.titrePrincipal ? ref(50) : ref(20);
@@ -119,14 +126,14 @@ const freeKeywords = ref({});
 const rameauKeywords = ref({});
 const mixedKeywords = ref({});
 
+const backFromKeywordModal = ref(null);
 
 setKeywords();
 
 onBeforeUpdate(() => {
   setKeywords();
 });
 
-
 /**
  * Computed Properties
  */
@@ -208,6 +215,15 @@ function focusLastKeyword() {
   }
 }
 
+onUpdated(() => {
+  if(overlayIsOpened.value) {
+    document.getElementById('legend-tooltip').focus();
+  } else {
+    console.log(backFromKeywordModal.value)
+    backFromKeywordModal.value.focus();
+  }
+});
+
 /**
  * Watchers
  */
@@ -388,6 +404,14 @@ h3 {
   justify-self: end;
 }
 
+:deep(.v-overlay__content) {
+  width: 98%;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .legend-tooltip {
   display: flex;
   flex-direction: column;
@@ -396,6 +420,18 @@ h3 {
   :deep(.v-chip) {
     width: fit-content;
   }
+
+  .close-overlay-button-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .close-overlay-button {
+    margin-top: 1em;
+    width: fit-content;
+    color: rgb(var(--v-theme-text-dark-blue));
+    text-transform: capitalize;
+  }
 }
 
 :deep(.v-chip__underlay) {

diff --git a/components/common/results/ResultComponents.vue b/components/common/results/ResultComponents.vue
@@ -14,7 +14,7 @@
     <Transition mode="out-in">
       <div id="returned-results-statement-container" aria-labelledby="returned-results-statement" tabindex="0" ref="returnStatementDiv">
         <div id="returned-results-statement" v-if="dataReady">
-          <h2>
+          <h1>
             <span>{{ $t("results.searched") }}{{ '\xa0' }}</span>
             <span class="darker-text">"{{ persistentQuery }}"{{ '\xa0' }}</span>
             <span>{{ $t("results.returned") }}{{ '\xa0' }}</span>
@@ -27,9 +27,9 @@
                 :json-href="'/api/v1/theses/recherche/' + '?q=' + encodeURIComponent(replaceAndEscape(persistentQuery, isAdvanced)) + '&nombre=10000&tri=' + encodeURIComponent(currentRoute.query.tri) + getFacetsRequest()">
               </CommonExportQueryButton>
             </div>
-          </h2>
+          </h1>
         </div>
-        <h2 id="returned-results-statement" v-else>{{ $t("results.searching") }}</h2>
+        <h1 id="returned-results-statement" v-else>{{ $t("results.searching") }}</h1>
       </div>
     </Transition>
 
@@ -213,7 +213,7 @@ watch(() => props.dataReady, () => {
 #returned-results-statement {
   display: inline-block;
 
-  h2 {
+  h1 {
     display: inline-block;
     margin: 0 1rem 0 1rem;
     font-family: Roboto-Medium, sans-serif;

diff --git a/components/personnes/search/SearchBar.vue b/components/personnes/search/SearchBar.vue
@@ -6,7 +6,7 @@
       :no-data-text="isSuggestionLoading ? $t('personnes.searchBar.loading') : $t('personnes.searchBar.noData')"
       v-model="request" v-model:search="requestSearch" variant="outlined" cache-items hide-details hide-selected
       no-filter density="compact" return-object type="text" menu-icon="" @keydown.enter="search"
-      :loading="isSuggestionLoading" enterkeyhint="send" ref="targetElement">
+      :loading="isSuggestionLoading" enterkeyhint="send" ref="targetElement" id="searchbar">
       <!--      Bouton rechercher-->
       <!--      Bouton effacer texte-->
       <template v-slot:append-inner>

diff --git a/components/theses/search/SearchBar.vue b/components/theses/search/SearchBar.vue
@@ -3,7 +3,7 @@
     <v-combobox role="search" v-if="!isAdvanced" class="searchbar__input" label="Rechercher des thèses" single-line :items="items"
       :menu="suggestionActive" :menu-props="menuProps" v-model="request" v-model:search="requestSearch" variant="outlined" base-color="primary"
       cache-items hide-details hide-no-data hide-selected no-filter density="compact" return-object type="text"
-      menu-icon="" @keydown.enter="search" enterkeyhint="send" ref="targetElement">
+      menu-icon="" @keydown.enter="search" enterkeyhint="send" ref="targetElement" id="searchbar">
       <!--      Bouton rechercher-->
       <!--      Bouton effacer texte-->
       <template v-slot:append-inner>

diff --git a/locales/en.json b/locales/en.json
@@ -2,6 +2,7 @@
 "errors": {
 "parameters": "Error in parameter name"
 },
+  "skip": "Go directly to searchbar.",
 "homepage": "Go to homepage.",
 "slogan": "The search engine for French thesis",
 "toutesTheses": "Thesis",

diff --git a/locales/fr.json b/locales/fr.json
@@ -2,6 +2,7 @@
   "errors": {
     "parameters": "Erreur dans le nom du paramètre"
   },
+  "skip": "Aller directement à la barre de recherche",
   "homepage": "Accéder à la page d'accueil.",
   "slogan": "Le moteur de recherche des thèses françaises",
   "slogan2lines": "Le moteur de recherche <br /> des thèses françaises",