RGAA différentiation des listitems et des boutons

components/common/ExportButton.vue

@@ -1,9 +1,11 @@
 <template>
   <v-menu location="bottom">
     <template v-slot:activator="{ props }">
-      <v-btn flat append-icon="mdi-upload-box" variant="outlined" v-bind="props" role="listitem">
-        <p>{{ $t("theseView.exporter") }}</p>
-      </v-btn>
+      <div role="listitem" class="v-btn-container">
+        <v-btn flat append-icon="mdi-upload-box" variant="outlined" v-bind="props" role="button">
+          <p>{{ $t("theseView.exporter") }}</p>
+        </v-btn>
+      </div>
     </template>
     <v-list role="list">
       <v-list-item role="listitem"
@@ -12,7 +14,7 @@
       >
         <v-list-item-title class="export-titles">{{ $t(index) }}</v-list-item-title>
         <v-list-item-subtitle v-for="file in exportType" class="export-buttons">
-            <v-btn color="secondary-darken-3" density="compact" :href="file.url">
+            <v-btn color="secondary-darken-3" density="compact" :href="file.url" role="button">
               {{ file.title }}
             </v-btn>
         </v-list-item-subtitle>
@@ -60,13 +62,16 @@ exportTypeList.value = {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.v-btn {
-  text-transform: none;
+.v-btn-container {
   display: inline-flex;
-  padding: 0 1em;
-  letter-spacing: 0.5px;
-  max-width: 90%;
-  font-weight: 500;
+
+  .v-btn {
+    text-transform: none;
+    padding: 0 1em;
+    letter-spacing: 0.5px;
+    max-width: 90%;
+    font-weight: 500;
+  }
 
   :deep(.mdi-upload-box) {
     color: rgb(var(--v-theme-secondary-darken-2));

components/common/FooterCustom.vue

@@ -8,11 +8,11 @@
         }}</strong></a>
       </div>
       <div class="links-container footer-content">
-        <h1 aria-hidden="true">
+        <h1 aria-hidden="true" id="footer-link-title">
           <v-icon title="Lien externe">mdi-open-in-new</v-icon>
           {{ $t("accesDirect") }}
         </h1>
-        <div class="list-1" role="list">
+        <div class="list-1" role="list" aria-labelledby="footer-link-title">
           <div role="presentation" class="colonne1">
             <div class="list-item" role="listitem">
               <span class="first-column-bullet"><span class="orange-link">{{ ">\xa0" }}</span></span>

components/common/Toolbar.vue

@@ -5,31 +5,35 @@
 
   <ClientOnly>
     <div v-if="!mobile" class="thesis-toolbar no-wrap-text" role="list">
-      <v-btn v-if="isBackAvailable" flat prepend-icon="mdi-arrow-left-circle-outline" variant="outlined" role="listitem"
-        @click="previousPage">
-        <template v-slot:prepend-icon>
-          <v-icon>
-            mdi-arrow-left-circle
-          </v-icon>
-        </template>
-        <p>{{ $t("theseView.retour") }}</p>
-      </v-btn>
+      <div v-if="isBackAvailable" role="listitem" class="v-btn-container">
+        <v-btn flat prepend-icon="mdi-arrow-left-circle-outline" variant="outlined" role="button"
+          @click="previousPage">
+          <template v-slot:prepend-icon>
+            <v-icon>
+              mdi-arrow-left-circle
+            </v-icon>
+          </template>
+          <p>{{ $t("theseView.retour") }}</p>
+        </v-btn>
+      </div>
       <span v-else></span>
       <div class="no-wrap-text" role="presentation">
 <!--        Export-->
         <CommonExportButton :nnt="nnt" v-if="these" />
 <!--        Fin export-->
 <!--        Signaler-->
+        <div role="listitem" class="v-btn-container">
           <v-btn class="nuxt-link" v-if="!organisme && !personne" flat append-icon="mdi-alert-circle" variant="outlined"
                  :to="{ name: 'signaler', query: { 'nnt': nnt, 'source': source, 'etabPpn': etabPpn } }"
-                 target="_blank" role="listitem">
+                 target="_blank" role="button">
             <template v-slot:append-icon>
               <v-icon>
                 mdi-alert
               </v-icon>
             </template>
             <p>{{ $t("theseView.alert") }}</p>
           </v-btn>
+        </div>
 <!--        Fin signaler-->
         <v-btn v-if="personne" href="https://documentation.abes.fr/aidetheses/thesesfr/index.html#jai-une-question"
           alt="Documentation de theses.fr" target="_blank" variant="outlined" flat append-icon="mdi-alert-circle" role="listitem">
@@ -164,14 +168,17 @@ function previousPage() {
     color: rgb(var(--v-text-dark-blue));
   }
 
-  .v-btn {
-    margin: 1em;
-    text-transform: none;
+  .v-btn-container {
     display: inline-flex;
-    padding: 0 1em;
-    letter-spacing: 0.5px;
-    max-width: 90%;
-    font-weight: 500;
+
+    .v-btn {
+      margin: 1em;
+      padding: 0 1em;
+      max-width: 90%;
+      text-transform: none;
+      letter-spacing: 0.5px;
+      font-weight: 500;
+    }
 
     :deep(.v-btn__content) {
       width: 100%;

components/theses/ButtonsList.vue

@@ -12,7 +12,7 @@
       </button>
     </div>
 
-    <!--  Catégorie validé par le jury -->
+    <!--  Catégorie validée par le jury -->
     <div v-if="categoriesValide.length > 0 && soutenue">
       <div class="header-container no-wrap-text">
         <v-icon color="primary" class="menu-icon">mdi-certificate</v-icon>
@@ -23,23 +23,23 @@
           <v-expansion-panel v-if="sousCategorie.boutons.length > 0">
             <!--            Intitulé de la catégorie-->
             <v-expansion-panel-title class="sous-categorie-header" >
-              <h4>
+              <h4 id="categories-valide-title">
                 {{ sousCategorie.libelle }}
               </h4>
             </v-expansion-panel-title>
-            <v-expansion-panel-text>
+            <v-expansion-panel-text role="list" aria-labelledby="categories-valide-title">
               <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"
+                <v-btn v-if="b.typeAcces == 'ACCES_ESR'" role="listitem" 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 + $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"
+                <v-btn v-else-if="b.url" role="listitem" 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 + $t('externalLink')"
                   :aria-label="b.libelle" :flat="true">{{
         b.libelle }}
                 </v-btn>
-                <v-card class="texte-embargo" variant="outlined" v-else>
+                <v-card class="texte-embargo" role="listitem" variant="outlined" tabindex="0" v-else>
                   <img :alt="$t('theseView.alertSign')" class="icon-alert"
                     src="@/assets/triangle-exclamation-solid.svg" />
                   <span v-if="b.libelle === 'Embargo'">{{ $t("theseView.embargo") }} {{ b.dateFin.replaceAll("-", "/")
@@ -60,16 +60,16 @@
         <v-expansion-panel class="buttons-sub-header buttons-sub-header-other">
           <v-expansion-panel-title>
             <v-icon color="primary" class="menu-icon">mdi-list-box</v-icon>
-            <h3 class="buttons-title-header buttons-title-header-other">{{ $t("theseView.others") }}</h3>
+            <h3 class="buttons-title-header buttons-title-header-other" id="other-title">{{ $t("theseView.others") }}</h3>
           </v-expansion-panel-title>
-          <v-expansion-panel-text>
+          <v-expansion-panel-text role="list" aria-labelledby="other-title">
             <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"
+              <v-btn v-if="b.url" role="listitem" 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 + $t('externalLink')"
                 :aria-label="b.libelle" :flat="true">{{
         b.libelle }}
               </v-btn>
-              <v-card class="texte-embargo" variant="outlined"
+              <v-card class="texte-embargo" role="listitem" variant="outlined" tabindex="0"
                 v-if="b.libelle === 'Embargo' || b.libelle === 'Confidentialite'">
                 <img :alt="$t('theseView.alertSign')" class="icon-alert"
                   src="@/assets/triangle-exclamation-solid.svg" />
@@ -86,7 +86,7 @@
     </div>
     <!--  Encart thèse en cours de traitement-->
     <div v-if="soutenue && status === 'enCours'" class="buttons-list-wrapper processing-status">
-      <v-card class="texte-embargo" variant="outlined">
+      <v-card class="texte-embargo" variant="outlined" tabindex="0">
         <img :alt="$t('theseView.alertSign')" class="icon-alert" src="@/assets/triangle-exclamation-solid.svg" />
         <span v-if="source === 'sudoc'">{{ $t("theseView.enTraitementStartYear") }}{{ dateVerifiee }}{{
         $t("theseView.enTraitementEnd") }}</span>
@@ -98,7 +98,7 @@
 
   <!-- Modal Accès ESR -->
   <v-dialog v-model="dialog" :fullscreen="mobile" :width="mobile ? '100%' : '70%'">
-    <v-card style="padding: 2rem 2rem; display: flex;">
+    <v-card style="padding: 2rem 2rem; display: flex;" tabindex="0">
       <span v-html='$t("theseView.modalContent")'></span>
       <br />
       <v-checkbox v-model="checkboxModal" :label='$t("theseView.modalAgree")' />

locales/fr.json

@@ -106,7 +106,7 @@
     "enTraitementStartYear": "La soutenance a eu lieu en ",
     "enTraitementEnd": ". Le document qui a justifié du diplôme est en cours de traitement par l'établissement de soutenance.",
     "confidentialite": "Cette thèse est confidentielle jusqu’au ",
-    "alertSign": "Triangle exclamation plein",
+    "alertSign": "Attention",
     "access": "Accès à la thèse",
     "modalContent": "<h1>Avertissement</h1><br />L’auteur de la thèse n’a pas autorisé sa diffusion libre sur internet.<br /><br />Conformément à la réglementation nationale en vigueur, définie, <ul><li>entre le 1er septembre 2006 et le 1er septembre 2016, par les arrêtés du 7 août 2006 <a href='https://www.legifrance.gouv.fr/loda/id/JORFTEXT000000267752' target='_blank'>relatif à la formation doctorale</a> et <a href='https://www.legifrance.gouv.fr/loda/id/JORFTEXT000000635069' target='_blank'>relatif aux modalités de dépôt, de signalement, de reproduction, de diffusion et de conservation des thèses ou des travaux présentés en soutenance en vue du doctorat</a>, </li><li>à compter du 1er septembre 2016, par <a href='https://www.legifrance.gouv.fr/loda/id/LEGIARTI000032588123' target='_blank'>l’arrêté du 25 mai 2016 fixant le cadre national de la formation et les modalités conduisant à la délivrance du diplôme national de doctorat</a>, mis à jour le 26 août 2022,</li></ul><br /><u><strong>La thèse est diffusable uniquement au sein de la communauté universitaire française.</strong></u> Si vous êtes membres de ladite communauté universitaire (étudiants, enseignants, chercheurs, personnels), vous pouvez accéder au document en vous authentifiant avec le login et le mot de passe que vous utilisez habituellement au sein de votre établissement de rattachement.<br /><br />Cette thèse étant une œuvre de l’esprit, elle est protégée par le Code de la Propriété Intellectuelle. Le ou les fichiers que vous allez télécharger en votre qualité de membre de la communauté universitaire française <strong>ne peuvent être utilisés en dehors du cadre fixé par le droit à la copie privée </strong><a href='https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000037388886/' target='_blank'>(article L122-5, 2°, du CPI)</a>. Tout plagiat ou contrefaçon, ainsi que toute reproduction illicite ou diffusion effectuée en dehors du cadre privé sans autorisation préalable de l’auteur, est strictement interdit et vous expose à des sanctions pénales allant jusqu’à 3 ans d’emprisonnement et 300 000€ d’amende.",
     "modalAgree": "J’ai pris connaissance de la réglementation nationale et des conditions d’utilisation de la thèse.",