Corrige l'accessibilité des graphiques

CHANGELOG.md

@@ -6,6 +6,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ### Corrections 🐛
 
+- Ajoute une alternative aux graphiques du rapport sous forme de tableau ([#287](https://github.com/DISIC/Ara/pull/287))
 - Clarifie le statut de l’audit côté rapport ([#284](https://github.com/DISIC/Ara/pull/284))
 
 ## 03/02/2023

confiture-web-app/src/components/ChartLegend.vue

@@ -40,6 +40,6 @@
   background-color: var(--background-action-high-error);
 }
 .legend-color.not-applicable {
-  background-color: var(--background-contrast-grey);
+  background-color: var(--grey-200-850);
 }
 </style>

confiture-web-app/src/components/PieChart.vue

@@ -27,7 +27,7 @@ const chartConfig: ChartConfiguration<"pie", number[], string> = {
         backgroundColor: [
           getCssVarValue("--background-action-high-success"),
           getCssVarValue("--background-action-high-error"),
-          getCssVarValue("--background-contrast-grey"),
+          getCssVarValue("--border-plain-grey"),
         ],
         borderWidth: 0,
       },

confiture-web-app/src/components/ReportResults.vue

@@ -23,6 +23,7 @@ const stats = computed(() => {
             total: 100,
             unit: "%",
             hasDetails: true,
+            theme: "france",
           },
         ]
       : []),
@@ -37,6 +38,7 @@ const stats = computed(() => {
       total:
         report.data!.totalCriteriaCount * report.data!.context.samples.length,
       danger: true,
+      theme: "marianne",
     },
     {
       title: "Critères applicables",
@@ -72,6 +74,7 @@ const chartsName = {
           :total="stat.total"
           :unit="stat.unit"
           :danger="stat.danger"
+          :theme="stat.theme"
         >
           <template v-if="stat.hasDetails" #accordion-title>
             En savoir plus sur le calcul du taux
@@ -100,6 +103,25 @@ const chartsName = {
     <ResultDetailsCard
       class="fr-mb-6w result-card"
       :title="chartsName.resultDistribution"
+      :table-data="[
+        ['Critères', 'Résultat'],
+        [
+          'Conformes',
+          `${Math.round(report.data.resultDistribution.compliant.percentage)}%`,
+        ],
+        [
+          'Non conformes',
+          `${Math.round(
+            report.data.resultDistribution.notCompliant.percentage
+          )}%`,
+        ],
+        [
+          'Non applicables',
+          `${Math.round(
+            report.data.resultDistribution.notApplicable.percentage
+          )}%`,
+        ],
+      ]"
     >
       <div class="card-content">
         <ChartLegend class="card-legend" />
@@ -127,6 +149,22 @@ const chartsName = {
     <ResultDetailsCard
       class="fr-mb-6w result-card"
       :title="chartsName.pageDistribution"
+      :table-data="[
+        [
+          'Page',
+          'Critères conformes',
+          'Critères non conformes',
+          'Critères non applicables',
+        ],
+        ...report.data.pageDistributions.map((p) => {
+          return [
+            p.name,
+            `${Math.round(p.compliant.percentage)}%`,
+            `${Math.round(p.notCompliant.percentage)}%`,
+            `${Math.round(p.notApplicable.percentage)}%`,
+          ];
+        }),
+      ]"
     >
       <div class="card-content">
         <ChartLegend class="card-legend" />
@@ -156,6 +194,22 @@ const chartsName = {
     <ResultDetailsCard
       class="result-card"
       :title="chartsName.topicDistribution"
+      :table-data="[
+        [
+          'Thématique du RGAA',
+          'Critères conformes',
+          'Critères non conformes',
+          'Critères non applicables',
+        ],
+        ...report.data.topicDistributions.map((t, i) => {
+          return [
+            `${i + 1}. ${t.name}`,
+            `${Math.round(t.compliant.percentage)}%`,
+            `${Math.round(t.notCompliant.percentage)}%`,
+            `${Math.round(t.notApplicable.percentage)}%`,
+          ];
+        }),
+      ]"
     >
       <div class="card-content">
         <ChartLegend class="card-legend" />

confiture-web-app/src/components/ResultDetailsCard.vue

@@ -1,27 +1,85 @@
 <script lang="ts" setup>
 import { slugify } from "../utils";
 
-defineProps<{ title: string }>();
+defineProps<{
+  title: string;
+  tableData: string[][];
+}>();
 </script>
 
 <template>
-  <div class="card">
-    <div class="fr-py-5v fr-px-2w card-header">
-      <h3 :id="slugify(title)" class="fr-h4 fr-m-0">{{ title }}</h3>
-    </div>
+  <div>
+    <h3 :id="slugify(title)" class="fr-h4 fr-mb-3w">{{ title }}</h3>
 
-    <div class="fr-px-4v content">
-      <slot />
+    <div class="fr-tabs">
+      <ul
+        class="fr-tabs__list"
+        role="tablist"
+        :aria-label="`Format d’affichage pour ${title}`"
+      >
+        <li role="presentation">
+          <button
+            :id="`tabpanel-table-${slugify(title)}`"
+            class="fr-tabs__tab"
+            tabindex="0"
+            role="tab"
+            aria-selected="true"
+            :aria-controls="`tabpanel-table-${slugify(title)}-panel`"
+          >
+            Graphique
+          </button>
+        </li>
+        <li role="presentation">
+          <button
+            :id="`tabpanel-chart-${slugify(title)}`"
+            class="fr-tabs__tab"
+            tabindex="-1"
+            role="tab"
+            aria-selected="false"
+            :aria-controls="`tabpanel-chart-${slugify(title)}-panel`"
+          >
+            Tableau
+          </button>
+        </li>
+      </ul>
+      <div
+        :id="`tabpanel-table-${slugify(title)}-panel`"
+        class="fr-tabs__panel fr-tabs__panel--selected"
+        role="tabpanel"
+        :aria-labelledby="`tabpanel-table-${slugify(title)}`"
+        tabindex="0"
+      >
+        <slot />
+      </div>
+      <div
+        :id="`tabpanel-chart-${slugify(title)}-panel`"
+        class="fr-tabs__panel"
+        role="tabpanel"
+        :aria-labelledby="`tabpanel-chart-${slugify(title)}`"
+        tabindex="0"
+      >
+        <div class="fr-table fr-table--no-caption fr-mb-0">
+          <table>
+            <caption>
+              {{
+                title
+              }}
+            </caption>
+            <thead>
+              <tr>
+                <th v-for="header in tableData[0]" :key="header" scope="col">
+                  {{ header }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, i) in tableData.slice(1)" :key="i">
+                <td v-for="data in row" :key="data">{{ data }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.card {
-  border: 1px solid var(--border-default-grey);
-}
-
-.card-header {
-  border-bottom: 1px solid var(--border-default-grey);
-}
-</style>

confiture-web-app/src/components/StackBarChart.vue

@@ -54,7 +54,7 @@ const chartDatasets = [
   {
     label: "Non applicable",
     data: props.data.map((d) => d.notApplicable.percentage),
-    backgroundColor: getCssVarValue("--background-contrast-grey"),
+    backgroundColor: getCssVarValue("--grey-200-850"),
     barThickness: 16,
   },
 ];

confiture-web-app/src/composables/useChartColorsUpdate.ts

@@ -28,18 +28,29 @@ export function useChartColorsUpdate(
     const newColors = [
       getCssVarValue("--background-action-high-success"),
       getCssVarValue("--background-action-high-error"),
-      getCssVarValue("--background-contrast-grey"),
+      getCssVarValue("--grey-200-850"),
     ];
 
     setNewColors(chart, newColors);
     chart?.update();
   }
 
+  // Update chart colors on `data-fr-theme` attribute change
+  const observer = new MutationObserver((mutationList) => {
+    if (!mutationList.some((m) => m.attributeName === "data-fr-theme")) {
+      return;
+    }
+
+    updateChartColors();
+  });
+
   onMounted(() => {
     mediaQueryList.addEventListener("change", updateChartColors);
+    observer.observe(document.documentElement, { attributes: true });
   });
 
   onUnmounted(() => {
     mediaQueryList.removeEventListener("change", updateChartColors);
+    observer.disconnect();
   });
 }