From 1502c8d89f67bf26d0423a3a9de3304f6bbee739 Mon Sep 17 00:00:00 2001
From: jessy-david-dev <ultralionfr@gmail.com>
Date: Tue, 28 Apr 2026 17:57:49 +0200
Subject: [PATCH] feat: replace inline SVG with radix-ui AccessibilityIcon

---
 package.json                           |  3 +++
 pnpm-lock.yaml                         | 13 +++++++++++++
 src/components/AccessibilityWidget.tsx | 12 ++----------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 53de5ae..86a422e 100644
--- a/package.json
+++ b/package.json
@@ -59,5 +59,8 @@
     "typescript-eslint": "^8.58.2",
     "vite": "^6.4.2",
     "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ccaee6..5a2af93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@radix-ui/react-icons':
+        specifier: ^1.3.2
+        version: 1.3.2(react@19.2.5)
     devDependencies:
       '@eslint/js':
         specifier: ^10.0.1
@@ -383,6 +387,11 @@ packages:
   '@microsoft/tsdoc@0.16.0':
     resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
 
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
+
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -1688,6 +1697,10 @@ snapshots:
 
   '@microsoft/tsdoc@0.16.0': {}
 
+  '@radix-ui/react-icons@1.3.2(react@19.2.5)':
+    dependencies:
+      react: 19.2.5
+
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rollup/pluginutils@5.3.0(rollup@4.60.2)':
diff --git a/src/components/AccessibilityWidget.tsx b/src/components/AccessibilityWidget.tsx
index 4a216c1..8501d88 100644
--- a/src/components/AccessibilityWidget.tsx
+++ b/src/components/AccessibilityWidget.tsx
@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback } from "react";
+import { AccessibilityIcon } from "@radix-ui/react-icons";
 import { useA11yStore } from "../store";
 import { useA11yEffects } from "../useA11yEffects";
 import { AccessibilityPanel } from "./AccessibilityPanel";
@@ -87,16 +88,7 @@ export function AccessibilityWidget({
         aria-haspopup="dialog"
         onClick={() => setOpen((v) => !v)}
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          viewBox="0 0 24 24"
-          width="28"
-          height="28"
-          fill="currentColor"
-        >
-          <path d="M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm8 5H4a1 1 0 0 0 0 2h3.3l-1.76 7.04A1 1 0 0 0 6.5 17h.06l2.44-.81V22a1 1 0 0 0 2 0v-4h2v4a1 1 0 0 0 2 0v-5.81l2.44.81h.06a1 1 0 0 0 .96-1.25L16.7 9H20a1 1 0 0 0 0-2z" />
-        </svg>
+        <AccessibilityIcon aria-hidden="true" width="28" height="28" />
         {activeCount > 0 && (
           <span
             className="a11y-badge"