Merge pull request #216 from abes-esr/develop

THE-1280 THE-1261 Accessibilité tableau + formulaire
abes-esr · Apr 18, 2024 · f76111e · f76111e
2 parents 01bd85a + 09ddf31
commit f76111e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 20 deletions.
diff --git a/components/theses/ThesisTable.vue b/components/theses/ThesisTable.vue
@@ -1,9 +1,9 @@
 <template>
-  <table class="table" v-if="these.auteurs" title="meta-données de la thèse">
+  <table class="table" v-if="these.auteurs" aria-label="meta-données de la thèse" title="meta-données de la thèse">
     <tbody class="table-body">
       <!-- Auteur -->
       <tr v-if="these.auteurs && these.auteurs.length > 0" class="table-rows">
-        <td><strong>{{ $t('theseView.auteur') }}&nbsp;:{{ '\xa0' }}</strong></td>
+        <td role="rowheader"><strong>{{ $t('theseView.auteur') }}&nbsp;:{{ '\xa0' }}</strong></td>
         <td role="list">
           <template v-for="(auteur, index) in these.auteurs" :key="auteur.ppn">
             <nuxt-link v-if="auteur.ppn" class="clickable orange" :to="'/' + auteur.ppn" role="listitem">
@@ -18,7 +18,7 @@
       </tr>
       <!-- Direction -->
       <tr v-if="these.directeurs && these.directeurs.length > 0" class="table-rows">
-        <td><strong>{{ $t('theseView.direction') }}&nbsp;:{{ '\xa0' }}</strong></td>
+        <td role="rowheader"><strong>{{ $t('theseView.direction') }}&nbsp;:{{ '\xa0' }}</strong></td>
         <td role="list">
           <template v-for="(directeur, index) in these.directeurs" :key="directeur.ppn">
             <nuxt-link v-if="directeur.ppn" class="clickable lightblue" :to="'/' + directeur.ppn" role="listitem">
@@ -33,19 +33,19 @@
       </tr>
       <!-- Type -->
       <tr class="table-rows">
-        <td><strong>{{ $t('theseView.type') }}&nbsp;:{{ '\xa0' }}</strong></td>
+        <td role="rowheader"><strong>{{ $t('theseView.type') }}&nbsp;:{{ '\xa0' }}</strong></td>
         <td>
           <span>{{ these.status === "enCours" ? $t('theseView.projet') : $t('theseView.doctorat') }}</span>
         </td>
       </tr>
       <!-- Discipline -->
       <tr v-if="these.discipline" class="table-rows">
-        <td><strong>{{ $t('theseView.disciplines') }}&nbsp;:{{ '\xa0' }}</strong></td>
+        <td role="rowheader"><strong>{{ $t('theseView.disciplines') }}&nbsp;:{{ '\xa0' }}</strong></td>
         <td>{{ these.discipline }}</td>
       </tr>
       <!-- Date soutenance -->
       <tr v-if="these.dateSoutenance || these.datePremiereInscriptionDoctorat" class="table-rows">
-        <td><strong>{{ $t('theseView.dateSoutenance') }}&nbsp;:{{ '\xa0' }}</strong></td>
+        <td role="rowheader"><strong>{{ $t('theseView.dateSoutenance') }}&nbsp;:{{ '\xa0' }}</strong></td>
         <!-- Cas STAR : date de soutenance complete -->
         <td v-if="these.source === 'star'"> {{ $t('theseView.soutenue') }} {{
           these.dateSoutenance }}</td>
@@ -58,16 +58,16 @@
             {{ $t('theseView.inscription') }}
             {{ these.datePremiereInscriptionDoctorat }}
           </span>
-        <td v-if="these.isSoutenue">
+        <span v-if="these.isSoutenue">
           <br />
           <span> {{ $t('theseView.soutenue') }}</span>
           {{ these.dateSoutenance }}
-        </td>
+        </span>
         </td>
       </tr>
       <!-- Etablissement de soutenance et cotutelle-->
       <tr v-if="these.etabSoutenance && these.etabSoutenance.nom" class="table-rows">
-        <td>
+        <td role="rowheader">
           <strong>{{ $t('theseView.etablissements') }}&nbsp;:{{ '\xa0' }}</strong>
         </td>
         <td>
@@ -91,7 +91,7 @@
       </tr>
       <!-- Ecoles doctorales -->
       <tr v-if="these.ecolesDoctorales && these.ecolesDoctorales.length > 0" class="table-rows">
-        <td><strong>{{ $t('theseView.ecoles') }}&nbsp;:{{ '\xa0' }}</strong></td>
+        <td role="rowheader"><strong>{{ $t('theseView.ecoles') }}&nbsp;:{{ '\xa0' }}</strong></td>
         <td role="list">
           <template v-for="(ecole, index) in these.ecolesDoctorales" :key="ecole.ppn">
             <strong>
@@ -109,7 +109,7 @@
       <!-- Partenariat -->
       <!-- Première ligne -->
       <tr v-if="these.partenairesRecherche && these.partenairesRecherche.length > 0" class="table-rows">
-        <td>
+        <td role="rowheader">
           <strong>{{ $t('theseView.partenariat') }}&nbsp;:{{ '\xa0' }}</strong>
         </td>
         <td role="list">
@@ -146,7 +146,7 @@
       <!-- Jury -->
       <!-- Première ligne -->
       <tr v-if="(Object.keys(juryMembersGroupedByType).length > 0)" class="table-rows">
-        <td>
+        <td role="rowheader">
           <strong>{{ $t('theseView.jury') }}&nbsp;:{{ '\xa0' }}</strong>
         </td>
         <td role="list">

diff --git a/locales/en.json b/locales/en.json
@@ -165,9 +165,10 @@
 "envoyer": "Send",
 "annuler": "Cancel",
 "requis": "This field is required",
-"mailInvalide": "Invalid email address",
+"mailInvalide": "Invalid email address (example@abes.fr)",
 "info": "The data you see in theses.fr is the responsibility of the institutions authorized to award doctoral degrees. This form allows you to contact the relevant service within the institution responsible for the thesis:",
-"msg": "Your message has been successfully transmitted."
+"msg": "Your message has been successfully transmitted.",
+  "mandatory": "Asterisked (*) marked fields are mandatory."
 },
 "footer": {
 "texte": "Theses.fr is a search engine that lists all doctoral thesis defended in France since 1985, thesis topics prepared within French higher education institutions, and individuals involved in French doctoral research. The database is constantly evolving.",

diff --git a/locales/fr.json b/locales/fr.json
@@ -190,9 +190,10 @@
     "envoyer": "Envoyer",
     "annuler": "Annuler",
     "requis": "Ce champ est obligatoire",
-    "mailInvalide": "Adresse mail invalide",
+    "mailInvalide": "Adresse mail invalide (exemple@abes.fr)",
     "info" : "Les données que vous voyez dans theses.fr sont placées sous la responsabilité des établissements habilités à délivrer le doctorat. Ce formulaire vous permet de contacter directement l'établissement qui gère la thèse : ",
-    "msg": "Votre message a bien été transmis."
+    "msg": "Votre message a bien été transmis.",
+    "mandatory": "Les champs marqués d'un astérisque (*) sont obligatoires."
   },
   "footer": {
     "texte": "Le moteur de recherche theses.fr recense l’ensemble des thèses de doctorat soutenues en France depuis 1985, les sujets de thèse préparés au sein des établissements de l’enseignement supérieur français, et les personnes impliquées dans la recherche doctorale française. La base de données est en constante évolution.",

diff --git a/pages/signaler.vue b/pages/signaler.vue
@@ -10,15 +10,16 @@
   <div class="signaler-erreur-container">
     <h1 class="sr-only">Formulaire de signalement d'erreur</h1>
     <p>{{ $t("reportErrorView.info") }}<a target="_blank" :href="href">{{ href }}</a></p>
+    <p>{{ $t("reportErrorView.mandatory") }}</p>
       <v-form id="form" ref="form">
         <div class="form-row shortened">
-          <v-text-field :label="$t('reportErrorView.nom')" v-model="nom"
+          <v-text-field :label="$t('reportErrorView.nom')" v-model="nom" aria-autocomplete="given-name"
                         :rules=requiredRule variant="outlined" density="compact" class="item first-item"></v-text-field>
-          <v-text-field :label="$t('reportErrorView.prenom')" v-model="prenom" :rules=requiredRule variant="outlined"
+          <v-text-field :label="$t('reportErrorView.prenom')" v-model="prenom" aria-autocomplete="family-name" :rules=requiredRule variant="outlined"
                         density="compact" class="item"></v-text-field>
         </div>
         <div class="form-row shortened">
-          <v-text-field :label="$t('reportErrorView.mail')" v-model="mail" :rules="mailRule" variant="outlined"
+          <v-text-field :label="$t('reportErrorView.mail')" placeholder="exemple@abes.fr" v-model="mail" aria-autocomplete="email" :rules="mailRule" variant="outlined"
                         density="compact" required></v-text-field>
         </div>
         <div class="form-row shortened">
@@ -250,7 +251,7 @@ p {
 
 .privacy {
     font-size: 0.8rem;
-    color: rgb(var(--v-theme-gris-fonce));
+    color: rgb(var(--v-theme-text-dark-blue));
     padding-top: 0.8rem;
 }
 
@@ -288,6 +289,11 @@ p {
     flex-direction: column;
 }
 
+:deep(.v-label) {
+  color: rgb(var(--v-theme-text-dark-blue));
+  opacity: 1 !important;
+}
+
 .v-btn {
     margin-right: 10px;
 }