chore: a11y fix FAQ page iroco-co/audits-frago#3

iroco-co · Nov 28, 2023 · e519795 · e519795
1 parent a94b019
commit e519795
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -356,6 +356,7 @@
           "rest": "The rest is used to pay our other costs and to compensate the Iroco team."
         },
         "chart": {
+          "title": "Breakdown of service costs for Iroco",
           "tax": {
             "title": "VAT",
             "percentage": ": 20% (i.e. 16% including taxes)"

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
@@ -355,6 +355,7 @@
           "rest": "Le reste sert à payer nos autres frais et à rémunérer l'équipe d'Iroco."
         },
         "chart": {
+          "title": "Diagramme de répartition des coûts de service pour Iroco",
           "tax": {
             "title": "TVA",
             "percentage": ": 20% (soit 16% HT)"

diff --git a/src/lib/Chart.svelte → src/lib/SubscriptionChart.svelte b/src/lib/Chart.svelte → src/lib/SubscriptionChart.svelte
@@ -11,7 +11,7 @@
     role="img"
     width={(5 * size) / 3}
   >
-    <title>Subscription Chart</title>
+    <title>{$_("faq.questions.subscription.chart.title")}</title>
     <g data-z-index="3">
       <g data-z-index=".1" stroke-linejoin="round">
         <path
@@ -72,7 +72,7 @@
           y="16"
           transform="translate(479 176)"
           fill="#f2ebe3"
-          font-fontSize="1em"
+          font-size="1em"
         >
           <tspan>{$_("faq.questions.subscription.chart.payment.title")}</tspan>
           &nbsp;{$_("faq.questions.subscription.chart.payment.percentage")}
@@ -85,7 +85,7 @@
           y="16"
           transform="translate(182 347)"
           fill="#f2ebe3"
-          font-fontSize="1rem"
+          font-size="1rem"
         >
           <tspan>{$_("faq.questions.subscription.chart.hosting.title")}</tspan>
           &nbsp;{$_("faq.questions.subscription.chart.hosting.percentage")}
@@ -98,7 +98,7 @@
           y="16"
           transform="translate(90 85)"
           fill="#f2ebe3"
-          font-fontSize="1rem"
+          font-size="1rem"
         >
           <tspan>{$_("faq.questions.subscription.chart.iroco.title")}</tspan>
           &nbsp;{$_("faq.questions.subscription.chart.iroco.percentage")}

diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   /* eslint svelte/no-at-html-tags: "off" */
   import { _ } from "svelte-i18n";
-  import Chart from "../../lib/Chart.svelte";
+  import SubscriptionChart from "$lib/SubscriptionChart.svelte";
   let windowWidth: number;
 </script>
 
@@ -227,7 +227,7 @@
           <li>{$_("faq.questions.subscription.list.deployment")}</li>
           <li>{$_("faq.questions.subscription.list.rest")}</li>
         </ul>
-        <Chart size={Math.min((windowWidth * 0.8) / 2, 500)} />
+        <SubscriptionChart size={Math.min((windowWidth * 0.8) / 2, 500)} />
       </div>
       <div id="account" class="faq__q-a__account question">
         <h3>

diff --git a/test/unit/Chart.test.js b/test/unit/Chart.test.js
@@ -1,7 +1,7 @@
 /*global describe, test, expect*/
 import "@testing-library/jest-dom/extend-expect";
 import { render } from "@testing-library/svelte";
-import Chart from "../../src/lib/Chart.svelte";
+import Chart from "$lib/SubscriptionChart.svelte";
 import en from "../../src/i18n/en.json";
 import { addMessages, init } from "svelte-i18n";