RGAA différentiation des listitems et des boutons suite + création d'…

…un role aria liste pour regrouper toutes les facettes
abes-esr · Sep 20, 2024 · 5220df0 · 5220df0
1 parent 397a25d
commit 5220df0
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 43 deletions.
diff --git a/components/common/DomainSelector.vue b/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;
+          }
         }
       }
     }

diff --git a/components/common/HeaderCustom.vue b/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>

diff --git a/components/common/results/FacetDrawer.vue b/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
   }
 });
 

diff --git a/components/common/results/FacetsHeader.vue b/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">

diff --git a/components/common/results/FacetsList.vue b/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>

diff --git a/locales/fr.json b/locales/fr.json
@@ -15,6 +15,8 @@
   "rechercher": "Rechercher",
   "simple": "Recherche simple",
   "vider": "Réinitialiser les champs",
+  "reinitializeAll": "Réinitialiser toutes les facettes",
+  "reinitializeFacet": "Réinitialiser la facette",
   "accesDirect": "Ressources",
   "apropos": "A propos",
   "donnees": "Données personnelles",