From 474fc988f8699f684de2e755949641559289adb7 Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Tue, 28 Feb 2023 17:36:17 +0100
Subject: [PATCH] fix(a11y): add axe numbers

---
 frontend/components/Legend.vue         | 36 +++++++-------------------
 frontend/components/PolarAreaChart.vue | 20 +++++++-------
 2 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/frontend/components/Legend.vue b/frontend/components/Legend.vue
index 8e7b982..9d691e8 100644
--- a/frontend/components/Legend.vue
+++ b/frontend/components/Legend.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
       <span class="bold">Légende</span>
-      <ul>
+      <ol>
 <!--        <li v-for="axe in axes" :key="axe.identifier" :class="'axe-'+axe.identifier">{{ axe.shortTitle }}</li>-->
         <li class="axe-1">Pouvoir d'agir</li>
         <li class="axe-2">Multi-secteur</li>
@@ -13,38 +13,20 @@
         <li class="axe-8">Finances</li>
         <li class="axe-9">Moyens de production</li>
         <li class="axe-10">Travail</li>
-      </ul>
+      </ol>
     </div>
 </template>
 
-<!--<script lang="ts">-->
-<!--import { Component, Vue}  from "nuxt-property-decorator";-->
-<!--import {axeStore} from "~/utils/store-accessor";-->
-<!--import {Axe} from "~/repositories/models/axe.model";-->
-
-<!--@Component-->
-<!--export default class Legend extends Vue {-->
-
-<!--  async created() {-->
-<!--    await axeStore.getAxes();-->
-<!--  }-->
-
-<!--  get axes(): Axe[] {-->
-<!--    return axeStore.axes;-->
-<!--  }-->
-<!--}-->
-<!--</script>-->
-
 <style lang="scss" scoped>
 
 @import "assets/css/color";
 @import "assets/css/spacing";
 
-ul {
-  list-style: none;
+ol {
   margin: 0;
+  position: relative;
 }
-ul li::before {
+ol li::before {
   content: "";
 
   border: 0 solid;
@@ -53,16 +35,18 @@ ul li::before {
   width: 16px;
   height: 16px;
 
-  margin-right: $xxx_small;
+  position: absolute;
+  left: -22px;
 }
 
-ul li+li {
+ol li+li {
   border-top: 1px solid #E8E8E8;
 }
 
-ul li {
+ol li {
   line-height: 16px;
   padding: $xxx_small 0;
+  list-style-position: inside;
 }
 
 .axe-1::before { color: #CA8AE8; background: #CA8AE8 }
diff --git a/frontend/components/PolarAreaChart.vue b/frontend/components/PolarAreaChart.vue
index ccf7c26..59754a1 100644
--- a/frontend/components/PolarAreaChart.vue
+++ b/frontend/components/PolarAreaChart.vue
@@ -76,16 +76,16 @@ export default class PolarAreaChart extends Vue {
 
   readonly chartData = {
     labels: [
-      "Pouvoir d'agir",
-      "Multi-secteur",
-      "Local global",
-      "Utilité (sociale et écologique)",
-      "Communs",
-      "Démocratie",
-      "Coopération",
-      "Finances",
-      "Moyens de production",
-      "Travail"
+      "1. Pouvoir d'agir",
+      "2. Multi-secteur",
+      "3. Local global",
+      "4. Utilité (sociale et écologique)",
+      "5. Communs",
+      "6. Démocratie",
+      "7. Coopération",
+      "8. Finances",
+      "9. Moyens de production",
+      "10. Travail"
     ],
     datasets: [
       {