From 03ef4083f8f642cb957a9582f13f2d651a35e897 Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Wed, 23 Oct 2024 16:23:52 +0200
Subject: [PATCH] refactor: fix unreachable a11y report

---
 documentation/helpers/A11yReport/index.tsx | 35 +++++++++++++++-------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/documentation/helpers/A11yReport/index.tsx b/documentation/helpers/A11yReport/index.tsx
index e354a99a4..98e00a7a1 100644
--- a/documentation/helpers/A11yReport/index.tsx
+++ b/documentation/helpers/A11yReport/index.tsx
@@ -3,14 +3,17 @@ import type { Report } from 'e2e/a11y/utils'
 import { useEffect, useState } from 'react'
 
 export const A11yReport = ({ of }: { of: string }) => {
-  const [errors, setErrors] = useState<Report['violations']>([])
+  const [errors, setErrors] = useState<Report['violations'] | 404>()
 
   useEffect(() => {
     const fetchReport = async (name: string) => {
       const { violations }: Report = await fetch(`/a11y/a11y-report-${name}.json`)
         .then(response => response.json())
         .then(data => data[`@spark-ui/${name}`])
-        .catch(() => console.error('Unable to find accessibility report'))
+        .catch(() => {
+          console.error('Unable to find accessibility report')
+          setErrors(404)
+        })
 
       if (violations.length) setErrors(violations)
     }
@@ -18,7 +21,26 @@ export const A11yReport = ({ of }: { of: string }) => {
     fetchReport(of)
   }, [of])
 
-  return errors.length ? (
+  if (!errors || (Array.isArray(errors) && !errors.length)) {
+    return (
+      <Callout kind="success" marginY="large">
+        <p>
+          This component has been successfully tested for <strong>WCAG 2.0 levels A and AA</strong>,{' '}
+          <strong>WCAG 2.1 levels A and AA</strong> and for common accessibility best practices.
+        </p>
+      </Callout>
+    )
+  }
+
+  if (errors === 404) {
+    return (
+      <Callout kind="error" marginY="large">
+        <p>No accessibility report were find for this component.</p>
+      </Callout>
+    )
+  }
+
+  return (
     <Callout kind="error" marginY="large">
       <p>
         This component didn&apos;t pass all tests for <strong>WCAG 2.0 levels A and AA</strong>,{' '}
@@ -38,12 +60,5 @@ export const A11yReport = ({ of }: { of: string }) => {
         ))}
       </ul>
     </Callout>
-  ) : (
-    <Callout kind="success" marginY="large">
-      <p>
-        This component has been successfully tested for <strong>WCAG 2.0 levels A and AA</strong>,{' '}
-        <strong>WCAG 2.1 levels A and AA</strong> and for common accessibility best practices.
-      </p>
-    </Callout>
   )
 }