✨ Add ResponsivenessProvider and axeAccessibilityReporter() ✨

Aszurar · Jan 16, 2024 · f16dce7 · f16dce7
1 parent 34afcc5
commit f16dce7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,16 +5,22 @@ import { Dashboard } from './components/Dashboard'
 import { Footer } from './components/Footer'
 import { ThemeProvider } from './context/theme'
 import { TransactionsProvider } from './context/transactions'
+import { ResponsivenessProvider } from './context/responsiveness'
+import { axeAccessibilityReporter } from './utils/axeAccessibilityReporter'
+
+axeAccessibilityReporter()
 
 export function App() {
   return (
     <ThemeProvider>
       <TransactionsProvider>
-        <div className="flex min-h-screen flex-col antialiased">
-          <Header />
-          <Dashboard />
-          <Footer />
-        </div>
+        <ResponsivenessProvider>
+          <div className="flex min-h-screen flex-col antialiased">
+            <Header />
+            <Dashboard />
+            <Footer />
+          </div>
+        </ResponsivenessProvider>
       </TransactionsProvider>
     </ThemeProvider>
   )

diff --git a/src/utils/axeAccessibilityReporter.ts b/src/utils/axeAccessibilityReporter.ts
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+export async function axeAccessibilityReporter() {
+  if (import.meta.env.DEV) {
+    const axe = await import('@axe-core/react')
+
+    axe.default(React, ReactDOM, 1000)
+  }
+}