Merge pull request #229 from abes-esr/test

THE-12XX Conformité accessibilité divers
abes-esr · May 30, 2024 · dd98fc7 · dd98fc7
2 parents 8d3b148 + ef3a073
commit dd98fc7
Show file tree

Hide file tree

Showing 20 changed files with 92 additions and 79 deletions.
diff --git a/app.vue b/app.vue
@@ -497,7 +497,9 @@ h4 {
 }
 
 .interlignes * :not(.v-btn__content, .v-btn, .v-input, .v-field, .v-input__control, .v-label, .v-field__field, .v-select, .v-field__overlay, .v-field__input, .v-select__selection, .v-select__selection-text) {
-  line-height: 2rem !important;
+  line-height: 1.5 !important;
+  letter-spacing: 0.12em !important;
+  word-spacing: 0.16em !important;
 }
 
 .justification p {

diff --git a/components/common/FooterCustom.vue b/components/common/FooterCustom.vue
@@ -34,6 +34,12 @@
                   title="Accéder à la documentation de theses.fr">{{
           $t("footer.doc") }}</a></span>
             </div>
+            <div role="listitem">
+              <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
+              <span><a href="http://search.ndltd.org/" target="_blank"
+                  title="Global ETD Search - Les thèses électroniques dans le monde">{{
+                    $t("footer.globalETD") }}</a></span>
+            </div>
           </div>
           <div role="presentation" class="colonne2">
             <div role="listitem">
@@ -49,7 +55,6 @@
                     $t("footer.tef")
                   }}</a></span>
             </div>
-
             <div role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>
               <span><a href="https://stp.abes.fr/node/3?origine=thesesFr" target="_blank"

diff --git a/components/common/HeaderCustom.vue b/components/common/HeaderCustom.vue
@@ -7,18 +7,17 @@
             :src="'/icone-handicap-visuel-' + colorMode + '.svg'" />
         </v-btn>
   <!--     Quand actif ajouter role="listitem" -->
-        <div class="languages-btn">
-          <!-- selecteur de langues désactivé
-          <v-btn flat @click="setLanguage('fr')" title="Langue française"
-            :class="locale === 'fr' ? 'selected' : ''">FR</v-btn>
-          |
-          <v-btn flat @click="setLanguage('en')" title="English Language"
-            :class="locale === 'en' ? 'selected' : ''">EN</v-btn>
-          |
-          <v-btn flat @click="setLanguage('es')" title="English Language"
-            :class="locale === 'es' ? 'selected' : ''">ES</v-btn>
-            -->
-        </div>
+<!--        <div class="languages-btn">-->
+<!--          &lt;!&ndash; selecteur de langues désactivé &ndash;&gt;-->
+<!--          <v-btn flat @click="setLanguage('fr')" title="Langue française"-->
+<!--            :class="locale === 'fr' ? 'selected' : ''">FR</v-btn>-->
+<!--          |-->
+<!--          <v-btn flat @click="setLanguage('en')" title="English Language"-->
+<!--            :class="locale === 'en' ? 'selected' : ''">EN</v-btn>-->
+<!--          |-->
+<!--          <v-btn flat @click="setLanguage('es')" title="Idioma espanol"-->
+<!--            :class="locale === 'es' ? 'selected' : ''">ES</v-btn>-->
+<!--        </div>-->
       </div>
       <div class="text-center text-md-right" role="presentation">
         <!--<v-btn tabindex="-1" title="Réseau" size="x-large" icon>
@@ -163,8 +162,8 @@ header {
 }
 
 .language-accessibility-toolbar {
-  //display: grid; // dé-commenter si on active le bouton accessibilité
-  //grid-template-columns: 1fr 20px 3fr;
+  display: grid; // dé-commenter si on active le bouton accessibilité
+  grid-template-columns: 1fr 20px 3fr;
   margin: 0 30px 0;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
@@ -173,8 +172,9 @@ header {
 }
 
 .languages-btn {
-  grid-column-start: 1; // 3 si on active le bouton accessibilité
+  grid-column-start: 3; // 3 si on active le bouton accessibilité
   max-height: 36px;
+  align-self: center;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     grid-column-start: 2;

diff --git a/components/common/HeaderMobile.vue b/components/common/HeaderMobile.vue
@@ -48,17 +48,16 @@
     <v-fade-transition>
       <div v-show="showMenu" ref="expandedMenu" tabindex="0" class="expanded-search-bar-container white-containers" role="list">
         <div class="languages-btn-container">
-          <!--
-          <div class="languages-btn">
-            <button flat @click="setLanguage('fr')" title="Langue française"
-              :class="locale === 'fr' ? 'selected' : ''">FR</button>
-            <p>|</p>
-            <button flat @click="setLanguage('en')" title="English Language"
-              :class="locale === 'en' ? 'selected' : ''">EN</button>
-            <p>|</p>
-            <button flat @click="setLanguage('es')" title="English Language"
-              :class="locale === 'es' ? 'selected' : ''">ES</button>
-          </div>-->
+<!--          <div class="languages-btn">-->
+<!--            <button flat @click="setLanguage('fr')" title="Langue française"-->
+<!--              :class="locale === 'fr' ? 'selected' : ''">FR</button>-->
+<!--            <p>|</p>-->
+<!--            <button flat @click="setLanguage('en')" title="English Language"-->
+<!--              :class="locale === 'en' ? 'selected' : ''">EN</button>-->
+<!--            <p>|</p>-->
+<!--            <button flat @click="setLanguage('es')" title="Idioma Espanol"-->
+<!--              :class="locale === 'es' ? 'selected' : ''">ES</button>-->
+<!--          </div>-->
         </div>
         <div class="expanded-burger-menu">
           <div class="nav-bar-list-burger">

diff --git a/components/common/Keywords.vue b/components/common/Keywords.vue
@@ -218,7 +218,7 @@ function focusLastKeyword() {
 onUpdated(() => {
   if(overlayIsOpened.value) {
     document.getElementById('legend-tooltip').focus();
-  } else {
+  } else if (backFromKeywordModal.value !== null) {
     backFromKeywordModal.value.focus();
   }
 });

diff --git a/components/common/results/FacetCheckbox.vue b/components/common/results/FacetCheckbox.vue
@@ -1,7 +1,7 @@
 <template>
   <v-lazy  :min-height="10" :options="{ threshold: 0 }">
     <v-checkbox :aria-label="`${replaceFacetsText(facetItem.label)} (${facetItem.value.toLocaleString('fr-FR')})` + ' résultats'" v-model="checkboxState" @click="updateCheckbox" :class="`checkboxes ms-${props.marginOffset}`"
-      :label="`${replaceFacetsText(facetItem.label)} (${facetItem.value.toLocaleString('fr-FR')})`" density="compact" inline hide-details>
+      :label="`${replaceFacetsText(facetItem.label)} (${facetItem.value.toLocaleString('fr-FR')})`" density="compact" inline hide-details @keyup.enter="updateCheckbox">
     </v-checkbox>
   </v-lazy>
 

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">
-          <h1>
+          <h1 aria-live="assertive" aria-atomic="true">
             <span>{{ $t("results.searched") }}{{ '\xa0' }}</span>
             <span class="darker-text">"{{ persistentQuery }}"{{ '\xa0' }}</span>
             <span>{{ $t("results.returned") }}{{ '\xa0' }}</span>
@@ -29,7 +29,7 @@
             </div>
           </h1>
         </div>
-        <h1 id="returned-results-statement" v-else>{{ $t("results.searching") }}</h1>
+        <h1 id="returned-results-statement" role="status" v-else>{{ $t("results.searching") }}</h1>
       </div>
     </Transition>
 
@@ -105,11 +105,13 @@ const props = defineProps({
  */
 // Déclarer une référence réactive pour stocker le dernier élément cliqué
 const dernierElementClique = ref(null);
+const dernierElementCliqueTag = ref(null);
 
 // Ajouter un gestionnaire d'événements de clic
 const handleClick = (event) => {
   dernierElementClique.value = event.target.innerText;
-};
+  dernierElementCliqueTag.value = event.target.type;
+}
 
 onMounted(() => {
   document.addEventListener("click", handleClick);
@@ -130,7 +132,7 @@ const isAdvanced = useState("isAdvanced");
 const returnStatementDiv = ref(null);
 
 onMounted (() => {
-  if(dernierElementClique.value !==  t('avancee') && dernierElementClique.value !==  t('simple'))
+  if(dernierElementClique.value !==  t('avancee') && dernierElementClique.value !==  t('simple') && dernierElementCliqueTag.value !== 'checkbox')
     returnStatementDiv.value.focus({ focusVisible: false});
 });
 
@@ -180,8 +182,9 @@ watch(() => props.resetPage, () => {
 });
 
 watch(() => props.dataReady, () => {
-  if(dernierElementClique.value !==  t('avancee') && dernierElementClique.value !==  t('simple'))
+  if(dernierElementClique.value !==  t('avancee') && dernierElementClique.value !==  t('simple') && dernierElementCliqueTag.value !== 'checkbox') {
     returnStatementDiv.value.focus({ focusVisible: false});
+  }
 });
 </script>
 

diff --git a/components/organismes/OrganismeView.vue b/components/organismes/OrganismeView.vue
@@ -160,7 +160,7 @@ getName(props.id).then(result => {
 
     useHead({
         meta: [
-            { name: 'DC.title', content: `${name.value} | Theses.fr` },
+            { name: 'DC.title', content: `${name.value}` },
             { name: 'DC.description.abstract', content: `${name.value} | Theses.fr` },
             { name: 'DC.source', content: `theses.fr` }
         ]

diff --git a/components/personnes/PersonneView.vue b/components/personnes/PersonneView.vue
@@ -153,7 +153,7 @@ getPersonne(props.id).then(result => {
 
   useHead({
     meta: [
-      { name: 'DC.title', content: `${item.value.prenom} ${item.value.nom} | Theses.fr` },
+      { name: 'DC.title', content: `${item.value.prenom} ${item.value.nom}` },
       { name: 'DC.description.abstract', content: `${item.value.prenom} ${item.value.nom} | Theses.fr` },
       { name: 'DC.source', content: `theses.fr` }
     ]

diff --git a/components/personnes/search/SearchBar.vue b/components/personnes/search/SearchBar.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="searchbar">
     <v-combobox role="search" class="searchbar__input" label="Rechercher des personnes, par nom ou par domaine d’expertise"
-      :items="suggestions" :menu="isSuggestionActive && suggestions.length != 0" :menu-props="menuProps"
-      :hide-no-data="!isSuggestionActive || suggestions.length == 0"
+      :items="suggestions" :menu-props="menuProps" hide-no-data
       :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" id="searchbar">
+      :loading="isSuggestionLoading" enterkeyhint="send" ref="comboboxElement" id="searchbar" autocomplete="off">
       <!--      Bouton rechercher-->
       <!--      Bouton effacer texte-->
       <template v-slot:append-inner>
@@ -28,14 +27,11 @@
         </v-btn>
       </template>
       <!-- Liste auto-complétion -->
-      <template v-slot:prepend-item v-if="suggestions.length > 0">
+      <template v-slot:prepend-item v-if="suggestions.length > 1">
         <h3>{{ $t('personnes.searchBar.title-personnes') }}</h3>
         <h3>{{ $t('personnes.searchBar.title-thematiques') }}</h3>
       </template>
-      <v-list-item>
-        <span></span>
-      </v-list-item>
-      <template v-slot:item="{ item, props, index }">
+      <template v-slot:item="{ item, props, index }" v-if="suggestions.length > 1">
         <v-list-item v-if="index === 0" id="spacer-v-list-item"></v-list-item>
         <v-list-item v-bind="props" :key="index" :title="false" :disabled="item.raw.personne == null"
           @click="selectSuggestion(item.raw.personne)">
@@ -57,7 +53,6 @@
     <div class="searchbar__action">
       <v-checkbox :label="$t('disableSuggestion')" v-model="isSuggestionDisabledCheckbox"
         :title='$t("disableSuggestion")'></v-checkbox>
-
     </div>
   </div>
 </template>
@@ -82,15 +77,23 @@ defineProps({
   },
 });
 
-const request = ref();
+const request = ref("");
 const requestSearch = ref("");
 const emit = defineEmits(['onError', 'reinitializePageNumber']);
 
-const menuProps = {
-  'open-on-focus': false,
-  'content-class': 'autocompl',
-  'max-height': '360px'
-};
+const shouldShowMenu = computed(() => {
+  return isSuggestionActive.value && suggestions.value.length > 1 ? 0 : -1;
+});
+
+const menuProps = computed(() => {
+  return {
+    'open-on-focus': false,
+    'content-class': 'autocompl',
+    'max-height': '360px',
+    'scroll-strategy': 'close',
+    'z-index': shouldShowMenu
+  }
+});
 
 // Focus sur la barre de recherche lors du Ctrl + K
 const { ctrl_k } = useMagicKeys({
@@ -101,11 +104,11 @@ const { ctrl_k } = useMagicKeys({
   },
 });
 
-const targetElement = ref(null);
+const comboboxElement = ref(null);
 
 watch(ctrl_k, (v) => {
   if (v)
-    targetElement.value.focus();
+    comboboxElement.value.focus();
 });
 
 onMounted(
@@ -125,13 +128,13 @@ onMounted(
     } else {
       isSuggestionActive.value = true;
     }
+
     if (currentRoute.query && currentRoute.query.domaine) {
       setDomaine(decodeURI(currentRoute.query.domaine));
     } else {
       setDomaine("theses");
     }
-  }
-);
+});
 
 /**
  * Fonction pour vider le champs de recherche
@@ -145,7 +148,6 @@ function clearSearch() {
  * Fonction pour rechercher
  */
 async function search() {
-
   if (request.value === null || request.value === undefined) request.value = "";
 
   isSuggestionActive.value = false;
@@ -160,26 +162,23 @@ async function search() {
     query: { "q": encodeURI(request.value), "domaine": encodeURI(currentRoute.query.domaine) }
   });
 
-  if (!isSuggestionDisabledCheckbox.value) {
-    isSuggestionActive.value = true;
-  }
+  isSuggestionActive.value = !isSuggestionDisabledCheckbox.value;
 }
 
 /* ---------------- */
 /* Auto-complétion  */
 /* ---------------- */
 
 const isSuggestionDisabledCheckbox = ref(false);
-const isSuggestionActive = ref(false);
+const isSuggestionActive = ref(true);
 const isSuggestionLoading = ref(false);
 const suggestions = ref([]);
 
 /**
  * Watcher pour compléter la saisie dans la barre de recherche
  */
 watch(requestSearch, async (candidate) => {
-
-  if (candidate != null && candidate.value != query.value && candidate != "[object Object]" && candidate.length > 2 && isSuggestionActive.value) {
+  if (candidate != null && candidate.value != query.value && candidate != "[object Object]" && candidate.length > 2 &&  !isSuggestionDisabledCheckbox.value) {
     await getSuggestionPersonne(candidate);
   } else {
     suggestions.value = [];

diff --git a/components/theses/ButtonsList.vue b/components/theses/ButtonsList.vue
@@ -31,11 +31,11 @@
               <div class="buttons-list" v-for="b in sousCategorie.boutons" :key="b">
                 <v-btn v-if="b.typeAcces == 'ACCES_ESR'" class="thesis-access-buttons" append-icon="mdi-open-in-new"
                   @click="checkboxModal = false; dialog = true; dialogUrl = b.url.startsWith('http') ? b.url : baseURL + b.url"
-                  :aria-label="b.libelle" :flat="true">{{
+                  :aria-label="b.libelle + $t('externalLink')" :flat="true">{{
         b.libelle }}
                 </v-btn>
                 <v-btn v-else-if="b.url" class="thesis-access-buttons" append-icon="mdi-open-in-new"
-                  :href="b.url.startsWith('http') ? b.url : baseURL + b.url" target="_blank" :title="b.libelle"
+                  :href="b.url.startsWith('http') ? b.url : baseURL + b.url" target="_blank" :title="b.libelle + $t('externalLink')"
                   :aria-label="b.libelle" :flat="true">{{
         b.libelle }}
                 </v-btn>
@@ -65,7 +65,7 @@
           <v-expansion-panel-text>
             <div class="buttons-list" v-for="b in boutonsAutres" :key="b">
               <v-btn v-if="b.url" class="thesis-access-buttons" append-icon="mdi-open-in-new"
-                :href="b.url.startsWith('http') ? b.url : baseURL + b.url" target="_blank" :title="b.libelle"
+                :href="b.url.startsWith('http') ? b.url : baseURL + b.url" target="_blank" :title="b.libelle + $t('externalLink')"
                 :aria-label="b.libelle" :flat="true">{{
         b.libelle }}
               </v-btn>

diff --git a/components/theses/ThesisComponent.vue b/components/theses/ThesisComponent.vue
@@ -112,8 +112,8 @@ watchEffect(() => {
     meta: [
       { name: 'DC.type', content: 'thesis' },
       { name: 'citation_dissertation_name', content: 'thesis' },
-      { name: 'DC.title', content: `${titleThese} | Theses.fr` },
-      { name: 'citation_title', content: `${titleThese} | Theses.fr` },
+      { name: 'DC.title', content: `${titleThese}` },
+      { name: 'citation_title', content: `${titleThese}` },
       { name: 'DC.description.abstract', content: props.these.resumes.fr },
       { name: 'citation_abstract', content: props.these.resumes.fr },
       { name: 'DC.subject', content: listeSujetsFR },

diff --git a/components/theses/results/ResultCard.vue b/components/theses/results/ResultCard.vue
@@ -43,7 +43,7 @@
             ,{{ '\xa0' }}
           </span>
           <span v-else-if="index === auteur.length - 2" class="card-text">
-            {{ $t('theseView.et') }}
+            {{ $t('resultCard.et') }}
           </span>
         </span>
 
@@ -237,4 +237,5 @@ const route = useRoute();
 
 .lightblue {
   color: rgb(var(--v-theme-secondary-darken-2)) !important;
-}</style>
+}
+</style>