diff --git a/src/constants/colors.ts b/src/constants/colors.ts
index 8dcae85..f1ee1a5 100644
--- a/src/constants/colors.ts
+++ b/src/constants/colors.ts
@@ -7,5 +7,5 @@ export const colors = {
brandBlue: '#2563EB',
textPrimary: '#F0F4F8',
textSecondary: '#A8BCCF',
- textMuted: '#5A7A94',
+ textMuted: '#6B8CA8',
}
diff --git a/src/index.css b/src/index.css
index 7dc7d04..12b8c55 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,3 +22,39 @@ body {
a {
text-decoration: none;
}
+
+*:focus-visible {
+ outline: 2px solid #22C55E;
+ outline-offset: 2px;
+ border-radius: 4px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.skip-link {
+ position: absolute;
+ top: -100%;
+ left: 0;
+ z-index: 100;
+ padding: 8px 16px;
+ background-color: #22C55E;
+ color: #080F1A;
+ font-weight: 600;
+ border-radius: 0 0 8px 0;
+ transition: top 0.1s;
+}
+
+.skip-link:focus {
+ top: 0;
+ outline: none;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 178844a..2b54419 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,16 @@
-import { StrictMode } from 'react'
+import React, { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Router } from './router'
import { ToastProvider } from './components/ui/Toast'
import './index.css'
+if (import.meta.env.DEV) {
+ import('@axe-core/react').then((axe) => {
+ axe.default(React, createRoot, 1000)
+ })
+}
+
const queryClient = new QueryClient()
createRoot(document.getElementById('root')!).render(
diff --git a/src/pages/Contracts.tsx b/src/pages/Contracts.tsx
index 94eab0a..7f1f440 100644
--- a/src/pages/Contracts.tsx
+++ b/src/pages/Contracts.tsx
@@ -60,10 +60,10 @@ function CopyButton({ text }: { text: string }) {
return (
)
}
@@ -133,20 +133,19 @@ export function Contracts() {
-