Merge pull request #243 from abes-esr/develop

Améliorations de l'accessibilité

components/common/DomainSelector.vue

@@ -1,23 +1,27 @@
 <template>
   <div class="domain-selector" role="list">
-    <v-btn flat @click="select('theses')" title="Rechercher des thèses" role="listitem">
-      <v-icon size="50" color="secondary">mdi-school</v-icon>
-      <span class="title">
-        <h2 :class="selected === 'theses' ? 'selected' : ''">
-          {{ $t("toutesTheses") }}
-        </h2>
-      </span>
-    </v-btn>
+    <div role="listitem">
+      <v-btn flat @click="select('theses')" title="Rechercher des thèses" role="button">
+        <v-icon size="50" color="secondary">mdi-school</v-icon>
+        <span class="title">
+          <h2 :class="selected === 'theses' ? 'selected' : ''">
+            {{ $t("toutesTheses") }}
+          </h2>
+        </span>
+      </v-btn>
+    </div>
     <v-divider aria-hidden="true" vertical></v-divider>
-    <v-btn flat @click="select('personnes')" title="Rechercher des personnes liées aux thèses" role="listitem">
-      <v-icon size="50" color="secondary">mdi-account-multiple</v-icon>
-      <span class="title">
-        <h2>
-          {{ $t("toutesPersonnes") }}
-          <br />
-        <span :class="selected === 'personnes' ? 'selected' : ''" id="personnes-subtitle">{{ $t("toutesPersonnesSubtitle") }}</span></h2>
-      </span>
-    </v-btn>
+    <div role="listitem">
+      <v-btn flat @click="select('personnes')" title="Rechercher des personnes liées aux thèses" role="button">
+        <v-icon size="50" color="secondary">mdi-account-multiple</v-icon>
+        <span class="title">
+          <h2>
+            {{ $t("toutesPersonnes") }}
+            <br />
+          <span :class="selected === 'personnes' ? 'selected' : ''" id="personnes-subtitle">{{ $t("toutesPersonnesSubtitle") }}</span></h2>
+        </span>
+      </v-btn>
+    </div>
   </div>
 </template>
 
@@ -68,26 +72,30 @@ watch(() => currentRoute.path, () => {
   background-color: transparent;
   margin: 1.5rem 0 1rem 0;
 
-  .v-btn {
+  div {
+    justify-content: space-evenly;
     flex: 0 1 48%;
     display: flex;
-    height: 100%;
-    background-color: transparent;
     padding: 0;
 
-    ::v-deep(.v-btn__content) {
-      display: flex;
-      flex-direction: column;
-      letter-spacing: 0.07em;
+    .v-btn {
+      background-color: transparent;
+      height: 100%;
 
-      h2 {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 48px;
+      ::v-deep(.v-btn__content) {
+        display: flex;
+        flex-direction: column;
+        letter-spacing: 0.07em;
 
-        @media #{ map-get(settings.$display-breakpoints, 'lg-and-up')} {
-          font-size: 18px;
-          line-height: 64px;
+        h2 {
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 48px;
+
+          @media #{ map-get(settings.$display-breakpoints, 'lg-and-up')} {
+            font-size: 18px;
+            line-height: 64px;
+          }
         }
       }
     }

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/HeaderCustom.vue

@@ -1,8 +1,9 @@
 <template>
   <v-app-bar flat id="appBar" v-if="!mobile && isReady">
     <div class="toolbar-wrapper" role="list">
-      <div class="text-center text-md-left language-accessibility-toolbar" role="presentation">
-        <v-btn plain size="x-large" @click="dialog = true" :title="$t('access.btn')" role="listitem">
+      <div class="text-center text-md-left language-accessibility-toolbar" role="listitem">
+
+        <v-btn plain size="x-large" @click="dialog = true" :title="$t('access.btn')" role="button">
           <img :alt="$t('header.accessibility')" id="logo-handicap-visuel"
             :src="'/icone-handicap-visuel-' + colorMode + '.svg'" />
         </v-btn>
@@ -40,7 +41,7 @@
     </div>
   </v-app-bar>
 
-  <v-dialog v-model="dialog" width="auto">
+  <v-dialog v-model="dialog" width="auto" attach="true">
     <v-card>
       <v-card-title>{{ $t("access.params") }}</v-card-title>
       <v-card-text>

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/common/results/FacetDrawer.vue

@@ -1,16 +1,16 @@
 <template>
-  <v-expansion-panels v-if="date || Object.keys(facet.checkboxes).length > 0" v-model="panel">
+  <v-expansion-panels v-if="date || Object.keys(facet.checkboxes).length > 0" v-model="panel" role="listitem">
     <v-expansion-panel :value="facet.name">
-      <v-expansion-panel-title class="facet-title-panel">
+      <v-expansion-panel-title class="facet-title-panel" :aria-labelledby="'facet-title-' + index">
         <template v-slot:actions="{ expanded }">
           <v-icon :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="x-large">
           </v-icon>
         </template>
-        <h2 class="facet-title">
+        <h2 :id="'facet-title-' + index" class="facet-title">
           {{ facet.name }}
         </h2>
         <v-btn @click.stop="" @click="reinitializeCheckboxes(); reinitializeFilterSearchText();" class="reinitialize-button" size="small" depressed
-          elevation="0" color="surface" title="Réinitialiser">
+          elevation="0" color="surface" :title="$t('reinitializeFacet') + facet.name">
           <v-icon>mdi-reload</v-icon>
         </v-btn>
       </v-expansion-panel-title>
@@ -77,6 +77,10 @@ const props = defineProps({
   resetTextFields: {
     type: Number,
     default: 0
+  },
+  index: {
+    type: Number,
+    default: 0
   }
 });
 

components/common/results/FacetsHeader.vue

@@ -5,7 +5,7 @@
       <h1 tabindex="0" class="facet-title-header">{{ $t('results.facetsHeader') }}</h1>
     </div>
     <v-btn v-if="!mobile" @click.stop="" @click="searchAndReinitializeAllFacets" size="small" depressed elevation="0"
-      color="surface" class="desktop-reinitialize-button">
+      color="surface" class="desktop-reinitialize-button" :aria-label="$t('reinitializeAll')">
       <v-icon>mdi-reload</v-icon> Réinitialiser
     </v-btn>
     <button v-else @click="closeOverlay" class="close-overlay-button" elevation="0" color="transparent">

components/common/results/FacetsList.vue

@@ -1,13 +1,17 @@
 <template>
-  <div class="facets">
+  <div class="facets" role="list">
     <CommonResultsFacetDrawer v-if="domaine === 'theses' && Object.keys(facets).length > 0" date key="facet-date"
       :facet="{ 'name': 'Date' }" :selected-facets-array="selectedFacetsArray"
-      @reinitializePageNumber="reinitializePageNumber">
+      @reinitializePageNumber="reinitializePageNumber"
+    index="-1"
+    >
     </CommonResultsFacetDrawer>
-    <CommonResultsFacetDrawer v-for="facet in facets" :key="`facet-${facet.name}`" :facet="facet"
+    <CommonResultsFacetDrawer v-for="(facet, index) in facets" :key="`facet-${facet.name}`" :facet="facet"
       :selected-facets-array="selectedFacetsArray"
       :reset-text-fields="resetTextFields"
-      @reinitializePageNumber="reinitializePageNumber">
+      @reinitializePageNumber="reinitializePageNumber"
+      :index="index"
+    >
     </CommonResultsFacetDrawer>
     <v-btn v-if="mobile" class="filters-btn" variant="outlined" color="primary" @click="closeOverlay">Appliquer les
       filtres</v-btn>

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")' />