Merge pull request #242 from abes-esr/develop

Accessibilité - amérliorations
abes-esr · Sep 19, 2024 · 42462cb · 42462cb
2 parents ea6d118 + 4966a9f
commit 42462cb
Show file tree

Hide file tree

Showing 8 changed files with 6,683 additions and 7,630 deletions.
diff --git a/components/common/Keywords.vue b/components/common/Keywords.vue
@@ -4,13 +4,13 @@
       <div class="key-words-title-wrapper">
         <div class="title">
           <v-icon color="primary">mdi-list-box</v-icon>
-          <h2>{{ $t('motcle') }}</h2>
+          <h2 id="keywords-title">{{ $t('motcle') }}</h2>
           <CommonLanguageSelector :languages="langList" @update-langue="onUpdateLangue"></CommonLanguageSelector>
         </div>
       </div>
       <div class="thesis-keywords" v-if="type === 'theses'">
         <div class="mots-cles-controlles" v-if="rameauKeywords.length > 0">
-          <div  tabindex="0" ref="backFromKeywordModal" aria-labelledby="mots-cles-controles-header" class="subtitle">
+          <div  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>
@@ -20,17 +20,16 @@
               <div tabindex="0" id="legend-tooltip">
                 <v-card class="legend-tooltip">
                   <span>
-                    {{ $t("motCleControleDescription") }} <a class="" href="https://www.idref.fr/">idRef.</a>
+                    {{ $t("motCleControleDescription") }} <a title="Se rendre sur le site de id Ref" 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' : ''">
+          <div role="list" aria-labelledby="mots-cles-controles-header" class="chip-lines v-chip-group" :class="isRtl ? 'rtl-text' : ''">
             <template v-for="keyWord in rameauKeywords" :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword">
               <nuxt-link role="listitem"
                 :to="{ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } }">
@@ -41,11 +40,11 @@
             </template>
           </div>
         </div>
-        <div class="mots-cles-libres" v-if="freeKeywords.length > 0">
+        <div id="mots-cles-libres" v-if="freeKeywords.length > 0">
           <div class="subtitle">
             <h3>{{ $t("motCleLibres") }}</h3>
           </div>
-          <div role="list" class="chip-lines v-chip-group" :class="isRtl ? 'rtl-text' : ''">
+          <div role="list" aria-labelledby="mots-cles-libres" class="chip-lines v-chip-group" :class="isRtl ? 'rtl-text' : ''">
             <template v-for="keyWord in freeKeywords" :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword">
               <nuxt-link role="listitem"
                 :to="{ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } }">
@@ -58,7 +57,7 @@
         </div>
       </div>
       <div v-else>
-        <div role="list" v-if="mixedKeywords.length > 0" class="chip-lines v-chip-group" :class="isRtl ? 'rtl-text' : ''">
+        <div role="list" aria-labelledby="keywords-title" v-if="mixedKeywords.length > 0" class="chip-lines v-chip-group" :class="isRtl ? 'rtl-text' : ''">
           <template v-for="keyWord in mixedKeywords" :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword">
             <nuxt-link role="listitem"
               :to="{ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } }">

diff --git a/components/icons/IconTarteaucitron.vue b/components/icons/IconTarteaucitron.vue
@@ -1,9 +1,9 @@
 <template>
-  <img style='height: 2em; margin: 0 5px; vertical-align: middle;' src='data:image/png;base64,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' alt='Cookies (fenêtre modale)' title='Cookies (fenêtre modale)'>
+  <a title="Aller à l'icone de gestion des cookies" href="#tarteaucitronManager">
+    <img style='height: 2em; margin: 0 5px; vertical-align: middle;' src='data:image/png;base64,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' alt='Cookies (fenêtre modale)' title='Cookies (fenêtre modale)'>
+  </a>
 </template>
 
-<script>
-export default {
-  name: "TarteaucitronIcon"
-};
+<script setup>
+
 </script>
diff --git a/components/organismes/OrganismeView.vue b/components/organismes/OrganismeView.vue
@@ -43,8 +43,8 @@
             <div class="info-wrapper" v-else>
                 <div class="info">
                     <IconsIconOrganisme></IconsIconOrganisme>
-                    <div class="nom-card">
-                        <h1 class="nomprenom">
+                    <div class="nom-card" tabindex="-1" ref="firstFocusElement" aria-labelledby="nomprenom-organisme">
+                        <h1 class="nomprenom" id="nomprenom-organisme">
                             {{ name }}
                         </h1>
                         <a :href="`https://www.idref.fr/${props.id}`" class="idref-logo" target="_blank"
@@ -106,7 +106,7 @@
 
 <script setup>
 import { useI18n } from "vue-i18n";
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted, nextTick } from "vue";
 import { useDisplay } from "vuetify";
 import { useColorMode } from '@vueuse/core';
 
@@ -173,6 +173,21 @@ getName(props.id).then(result => {
     }
 });
 
+
+const firstFocusElement = ref(null);
+
+// Focus sur le contenu de la page au chargement
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      if (firstFocusElement.value) {
+        firstFocusElement.value.focus({ focusVisible: false });
+      }
+    }, 100);
+  });
+});
+
+
 async function voirPlus(contexte, ppn) {
     switch (contexte) {
         case 'etabSoutenance':

diff --git a/components/personnes/PersonneView.vue b/components/personnes/PersonneView.vue
@@ -11,7 +11,7 @@
   <div v-if="!mobile" class="sub-header">
     <div class="search-bar-container white-containers">
       <div class="sub_header__logo">
-        <NuxtLink :to="{ path: '/', query: { domaine: 'theses' } }" title="Accueil du site">
+        <NuxtLink :to="{ path: '/', query: { domaine: 'theses' } }" title="Aller à l'accueil du site">
           <img class="logo IdRef" alt="Accueil Theses.fr" id="logoIMG" src="@/assets/icone-theses.svg" />
         </NuxtLink>
         <h1 v-html='$t("slogan2lines")'></h1>
@@ -43,8 +43,8 @@
       <div class="info-wrapper" v-if="dataReady">
         <div class="info">
           <IconsIconPersonne v-if="!mobile"></IconsIconPersonne>
-          <div class="nom-card">
-            <h1 class="nomprenom">
+          <div class="nom-card" tabindex="-1" ref="firstFocusElement" aria-labelledby="nomprenom">
+            <h1 class="nomprenom" id="nomprenom">
               <span class="prenom">{{ item.prenom + "\xa0" }}</span>
               <span class="nom">{{ item.nom }}</span>
             </h1>
@@ -103,7 +103,7 @@
 
 <script setup>
 import { useI18n } from "vue-i18n";
-import { defineAsyncComponent, onUpdated, ref } from 'vue';
+import { defineAsyncComponent, onUpdated, onMounted, ref, nextTick } from 'vue';
 import { useDisplay } from "vuetify";
 import { useColorMode } from '@vueuse/core';
 
@@ -167,6 +167,19 @@ getPersonne(props.id).then(result => {
   }
 });
 
+const firstFocusElement = ref(null);
+
+// Focus sur le contenu de la page au chargement
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      if (firstFocusElement.value) {
+        firstFocusElement.value.focus({ focusVisible: false });
+      }
+    }, 100);
+  });
+});
+
 onUpdated(() => {
   if (currentRoute.hash) {
     document.getElementById(currentRoute.hash.substring(1))?.scrollIntoView({ behavior: "smooth" });

diff --git a/components/theses/ThesisTitle.vue b/components/theses/ThesisTitle.vue
@@ -3,8 +3,8 @@
     <div class="thesis-icon">
       <ThesesResultsThesisIcon :status="status"></ThesesResultsThesisIcon>
     </div>
-    <div class="title-flexbox">
-      <h1 :class="isRtl ? 'rtl-text' : ''">
+    <div class="title-flexbox" ref="firstFocusElement" aria-labelledby="thesis-title" tabindex="-1">
+      <h1 :class="isRtl ? 'rtl-text' : ''" id="thesis-title">
         {{ currentTitle }}
       </h1>
       <CommonLanguageSelector class="language-selector" :languages="langList" @update-langue="onUpdateLangue">
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted, nextTick } from "vue";
 import { LanguesRTL } from "../../services/Common";
 
 const props = defineProps({
@@ -35,6 +35,19 @@ const isRtl = ref(false);
 
 currentTitle.value = props.titles[selectedLanguage.value];
 
+const firstFocusElement = ref(null);
+
+// Focus sur le contenu de la page au chargement
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      if (firstFocusElement.value) {
+        firstFocusElement.value.focus({ focusVisible: false });
+      }
+    }, 100);
+  });
+});
+
 /**
  * Computed Properties
  */