From 397a25d9e0b6b0abfc958f387a0147ff2bcb94b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 20 Sep 2024 14:18:57 +0200
Subject: [PATCH] =?UTF-8?q?RGAA=20diff=C3=A9rentiation=20des=20listitems?=
 =?UTF-8?q?=20et=20des=20boutons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/ExportButton.vue | 25 ++++++++++--------
 components/common/FooterCustom.vue |  4 +--
 components/common/Toolbar.vue      | 41 +++++++++++++++++-------------
 components/theses/ButtonsList.vue  | 24 ++++++++---------
 locales/fr.json                    |  2 +-
 5 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/components/common/ExportButton.vue b/components/common/ExportButton.vue
index 1600b48a..a2003d68 100644
--- a/components/common/ExportButton.vue
+++ b/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));
diff --git a/components/common/FooterCustom.vue b/components/common/FooterCustom.vue
index 9f43cf08..41473c2f 100644
--- a/components/common/FooterCustom.vue
+++ b/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>
diff --git a/components/common/Toolbar.vue b/components/common/Toolbar.vue
index 52376f3e..d2060045 100644
--- a/components/common/Toolbar.vue
+++ b/components/common/Toolbar.vue
@@ -5,24 +5,27 @@
 
   <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
@@ -30,6 +33,7 @@
             </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%;
diff --git a/components/theses/ButtonsList.vue b/components/theses/ButtonsList.vue
index f051b5e3..0e047afd 100644
--- a/components/theses/ButtonsList.vue
+++ b/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")' />
diff --git a/locales/fr.json b/locales/fr.json
index 1ba7a16f..1acbc90c 100644
--- a/locales/fr.json
+++ b/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.",