From c08dcc17835728b4195a0ad3258c9c26a2808785 Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 11 Aug 2025 13:58:01 +0200
Subject: [PATCH 1/8] fix: fix focus

---
 src/components/AuthLogin/styles.module.scss   |   7 +-
 src/components/Card.module.scss               |   7 +
 src/components/Card.tsx                       |  10 +-
 src/components/Input/input.module.scss        |   8 +-
 .../InteractiveBox/styles.module.scss         |  14 +-
 .../buttons/button/button.module.scss         |   7 +
 .../elements/buttons/button/index.tsx         |   2 +-
 src/scss/app.scss                             |   1 +
 src/scss/commons/_focus.scss                  | 145 ++++++++++++++++++
 src/scss/commons/_reset.scss                  |   7 -
 src/scss/elements/_form.scss                  |   9 +-
 src/scss/theme/_interactive-box.scss          |  13 ++
 12 files changed, 214 insertions(+), 16 deletions(-)
 create mode 100644 src/scss/commons/_focus.scss

diff --git a/src/components/AuthLogin/styles.module.scss b/src/components/AuthLogin/styles.module.scss
index 346ebfcfccf..29cf085b74e 100644
--- a/src/components/AuthLogin/styles.module.scss
+++ b/src/components/AuthLogin/styles.module.scss
@@ -21,8 +21,13 @@
   top: 50%;
   transform: translate(-50%, -50%);
   overflow: auto;
-  outline: none;
   background: var(--modal-bg-color-primary);
+
+  /* Enhanced focus styles for modal accessibility */
+  &:focus-visible {
+    outline: 2px solid var(--focus-outline-color-light);
+    outline-offset: 2px;
+  }
   width: 60%;
   padding: 1.4rem;
   border-radius: 1rem;
diff --git a/src/components/Card.module.scss b/src/components/Card.module.scss
index 4f9e9fbd7b7..11ae16d9119 100644
--- a/src/components/Card.module.scss
+++ b/src/components/Card.module.scss
@@ -76,6 +76,13 @@
       opacity: 1;
     }
   }
+
+  border: 2px solid transparent;
+
+  &:focus {
+    border: 2px solid var(--focus-outline-color-light);
+    outline: none;
+  }
 }
 
 .shape {
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 26845a4d69e..96785880074 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -18,7 +18,13 @@ export type CardItem = {
   buttonIcon?: 'arrow-right' | 'external-arrow'
 }
 
-export default function Card({ title, href, description, theme, buttonIcon = "arrow-right" }: CardItem) {
+export default function Card({
+  title,
+  href,
+  description,
+  theme,
+  buttonIcon = 'arrow-right',
+}: CardItem) {
   const [isHovered, setIsHovered] = useState(false)
 
   return (
@@ -47,7 +53,7 @@ export default function Card({ title, href, description, theme, buttonIcon = "ar
 
               {href && (
                 <Button
-                  as="button"
+                  as="div"
                   label={false}
                   type={theme === 'dark' ? 'secondary' : 'primary'}
                   icon={buttonIcon}
diff --git a/src/components/Input/input.module.scss b/src/components/Input/input.module.scss
index 4e4be867042..f7e4fcfdf07 100644
--- a/src/components/Input/input.module.scss
+++ b/src/components/Input/input.module.scss
@@ -35,10 +35,16 @@
     overflow: hidden;
     color: var(--input-color);
     font-style: normal;
-    outline: none;
     width: 100%;
     margin-bottom: 4px;
 
+    /* Enhanced focus styles for better accessibility */
+    &:focus-visible {
+      outline: 2px solid var(--focus-outline-color-light);
+      outline-offset: 1px;
+      border-color: var(--focus-outline-color-light);
+    }
+
     &:disabled {
       opacity: 0.5;
       pointer-events: none;
diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss b/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss
index aa4a562dc70..c707a8b6f38 100644
--- a/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss
+++ b/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss
@@ -285,8 +285,11 @@
     background-color: var(--general-gray-dark);
   }
 }
-.formControl:focus {
-  outline: none;
+/* Enhanced focus styles for better accessibility */
+.formControl:focus-visible {
+  outline: 2px solid var(--focus-outline-color-light);
+  outline-offset: 1px;
+  border-color: var(--focus-outline-color-light);
 }
 .formControl[type='number'] {
   border-color: transparent;
@@ -382,11 +385,16 @@
   background: none;
   padding: 0;
   border: 0;
-  outline: none;
   color: var(--general-gray-mid);
   font-size: inherit;
   line-height: 1;
   cursor: pointer;
+
+  /* Enhanced focus styles for interactive buttons */
+  &:focus-visible {
+    outline: 2px solid var(--focus-outline-color-light);
+    outline-offset: 2px;
+  }
 }
 .addItemIcon {
   display: inline-flex;
diff --git a/src/components/elements/buttons/button/button.module.scss b/src/components/elements/buttons/button/button.module.scss
index 0abc1112554..1db0c91a2e9 100644
--- a/src/components/elements/buttons/button/button.module.scss
+++ b/src/components/elements/buttons/button/button.module.scss
@@ -123,6 +123,13 @@
 
   mask-image: radial-gradient(white, black);
 
+  border: 2px solid transparent;
+
+  &:focus {
+    border: 2px solid var(--focus-outline-color-light);
+    outline: none;
+  }
+
   &:before {
     content: '';
 
diff --git a/src/components/elements/buttons/button/index.tsx b/src/components/elements/buttons/button/index.tsx
index ac155904d87..64147a18d25 100644
--- a/src/components/elements/buttons/button/index.tsx
+++ b/src/components/elements/buttons/button/index.tsx
@@ -21,7 +21,7 @@ interface ButtonProps {
   href?: string
   onClick?: () => void
   disabled?: boolean
-  as?: 'link' | 'a' | 'button'
+  as?: 'link' | 'a' | 'button' | 'div'
   external?: boolean
   rel?: string | boolean
   download?: boolean | string
diff --git a/src/scss/app.scss b/src/scss/app.scss
index d942f3f2c83..2ffcb41b4e9 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -1,4 +1,5 @@
 @import 'commons/reset';
+@import 'commons/focus';
 @import 'commons/typescale';
 @import 'commons/utils';
 @import 'commons/animations';
diff --git a/src/scss/commons/_focus.scss b/src/scss/commons/_focus.scss
new file mode 100644
index 00000000000..9bbbbd34c60
--- /dev/null
+++ b/src/scss/commons/_focus.scss
@@ -0,0 +1,145 @@
+/* Focus Management System - WCAG 2.4.7 & 1.4.11 Compliant */
+
+/* 
+ * Focus indicators with proper contrast ratios (minimum 3:1)
+ * Uses focus-visible for better UX (keyboard navigation only)
+ */
+
+:root {
+  /* Focus indicator colors with high contrast */
+  --focus-outline-color-light: #0066cc; /* Blue with high contrast */
+  --focus-outline-color-dark: #4da6ff; /* Lighter blue for dark mode */
+  --focus-outline-width: 2px;
+  --focus-outline-offset: 2px;
+  --focus-outline-style: solid;
+
+  /* Alternative focus colors for different contexts */
+  --focus-outline-warning: #ff6b00; /* Orange for warnings/errors */
+  --focus-outline-success: #00a651; /* Green for success states */
+
+  /* Box shadow focus for cases where outline doesn't work well */
+  --focus-shadow-light: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;
+  --focus-shadow-dark: 0 0 0 2px #0a0a0a, 0 0 0 4px #4da6ff;
+}
+
+[data-theme='dark'] {
+  --focus-outline-color-light: var(--focus-outline-color-dark);
+  --focus-shadow-light: var(--focus-shadow-dark);
+}
+
+/* Remove default focus styles only when we provide alternatives */
+*:focus {
+  outline: auto;
+}
+
+/* Apply focus-visible for keyboard navigation */
+*:focus-visible {
+  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
+  outline-offset: var(--focus-outline-offset);
+}
+
+/* Enhanced focus for interactive elements */
+a:focus-visible,
+button:focus-visible,
+[role='button']:focus-visible,
+[role='link']:focus-visible,
+[tabindex]:focus-visible {
+  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
+  outline-offset: var(--focus-outline-offset);
+}
+
+/* Form controls need special handling */
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
+  outline-offset: 1px; /* Tighter offset for form controls */
+}
+
+/* Checkbox and radio buttons */
+input[type='checkbox']:focus-visible,
+input[type='radio']:focus-visible {
+  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
+  outline-offset: 2px;
+}
+
+/* For elements where outline might be cut off, use box-shadow */
+.focus-shadow:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-shadow-light);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  *:focus-visible {
+    outline-width: 3px;
+    outline-color: highlight;
+  }
+}
+
+/* Focus for elements that might have complex backgrounds */
+.focus-high-contrast:focus-visible {
+  outline: 3px solid var(--focus-outline-color-light);
+  outline-offset: 2px;
+  background-color: rgba(255, 255, 255, 0.9);
+
+  [data-theme='dark'] & {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+}
+
+/* Skip link focus (for screen reader users) */
+.skip-link:focus-visible {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 9999;
+  padding: 8px 16px;
+  background: var(--focus-outline-color-light);
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+
+/* Ensure focus is visible even when using custom components */
+.custom-focus:focus-visible {
+  position: relative;
+}
+
+.custom-focus:focus-visible::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+/* Focus indicators that work well with rounded corners */
+.focus-rounded:focus-visible {
+  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: inherit;
+}
+
+/* Error state focus */
+.focus-error:focus-visible {
+  outline-color: var(--focus-outline-warning);
+}
+
+/* Success state focus */
+.focus-success:focus-visible {
+  outline-color: var(--focus-outline-success);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: no-preference) {
+  *:focus-visible {
+    transition: outline-color 0.15s ease-in-out;
+  }
+}
diff --git a/src/scss/commons/_reset.scss b/src/scss/commons/_reset.scss
index fde1001f9ff..025d918225f 100644
--- a/src/scss/commons/_reset.scss
+++ b/src/scss/commons/_reset.scss
@@ -152,12 +152,6 @@ button {
   background: none;
 }
 
-a,
-li,
-button {
-  outline-color: var(--general-white);
-}
-
 input,
 select,
 button,
@@ -168,7 +162,6 @@ textarea {
 
   appearance: none;
   border: none;
-  outline: none;
 }
 
 input[type='submit'] {
diff --git a/src/scss/elements/_form.scss b/src/scss/elements/_form.scss
index 11f27c8707f..ede402b8214 100644
--- a/src/scss/elements/_form.scss
+++ b/src/scss/elements/_form.scss
@@ -25,7 +25,14 @@ select {
     border-color calc(var(--motion) * var(--motion-speed) * 0.5) $gentle-ease;
 
   &:focus {
-    border-color: var(--general-dark);
+    border-color: var(--focus-outline-color-light);
+  }
+
+  /* Enhanced focus visibility for form controls */
+  &:focus-visible {
+    border-color: var(--focus-outline-color-light);
+    outline: 2px solid var(--focus-outline-color-light);
+    outline-offset: 1px;
   }
 }
 
diff --git a/src/scss/theme/_interactive-box.scss b/src/scss/theme/_interactive-box.scss
index 060ba717dff..35ed514f9a2 100644
--- a/src/scss/theme/_interactive-box.scss
+++ b/src/scss/theme/_interactive-box.scss
@@ -69,6 +69,13 @@
     transition: border var(--ifm-transition-fast) ease;
 
     background-color: transparent;
+
+    /* Enhanced focus styles for interactive box inputs */
+    &:focus-visible {
+      outline: 2px solid var(--focus-outline-color-light);
+      outline-offset: 1px;
+      border-color: var(--focus-outline-color-light);
+    }
   }
 
   &#method select,
@@ -87,6 +94,12 @@
     appearance: auto;
     width: 1.6rem;
     height: 1.6rem;
+
+    /* Enhanced focus styles for checkboxes */
+    &:focus-visible {
+      outline: 2px solid var(--focus-outline-color-light);
+      outline-offset: 2px;
+    }
   }
 
   &#interactive-box .form-group {

From d3bf73467aebd6b973346b54eea9148ebcef04ea Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 11 Aug 2025 14:02:17 +0200
Subject: [PATCH 2/8] chore: revert old files

---
 .../InteractiveBox/styles.module.scss              | 14 +++-----------
 src/scss/elements/_form.scss                       |  9 +--------
 src/scss/theme/_interactive-box.scss               | 13 -------------
 3 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss b/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss
index c707a8b6f38..aa4a562dc70 100644
--- a/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss
+++ b/src/components/ParserOpenRPC/InteractiveBox/styles.module.scss
@@ -285,11 +285,8 @@
     background-color: var(--general-gray-dark);
   }
 }
-/* Enhanced focus styles for better accessibility */
-.formControl:focus-visible {
-  outline: 2px solid var(--focus-outline-color-light);
-  outline-offset: 1px;
-  border-color: var(--focus-outline-color-light);
+.formControl:focus {
+  outline: none;
 }
 .formControl[type='number'] {
   border-color: transparent;
@@ -385,16 +382,11 @@
   background: none;
   padding: 0;
   border: 0;
+  outline: none;
   color: var(--general-gray-mid);
   font-size: inherit;
   line-height: 1;
   cursor: pointer;
-
-  /* Enhanced focus styles for interactive buttons */
-  &:focus-visible {
-    outline: 2px solid var(--focus-outline-color-light);
-    outline-offset: 2px;
-  }
 }
 .addItemIcon {
   display: inline-flex;
diff --git a/src/scss/elements/_form.scss b/src/scss/elements/_form.scss
index ede402b8214..11f27c8707f 100644
--- a/src/scss/elements/_form.scss
+++ b/src/scss/elements/_form.scss
@@ -25,14 +25,7 @@ select {
     border-color calc(var(--motion) * var(--motion-speed) * 0.5) $gentle-ease;
 
   &:focus {
-    border-color: var(--focus-outline-color-light);
-  }
-
-  /* Enhanced focus visibility for form controls */
-  &:focus-visible {
-    border-color: var(--focus-outline-color-light);
-    outline: 2px solid var(--focus-outline-color-light);
-    outline-offset: 1px;
+    border-color: var(--general-dark);
   }
 }
 
diff --git a/src/scss/theme/_interactive-box.scss b/src/scss/theme/_interactive-box.scss
index 35ed514f9a2..060ba717dff 100644
--- a/src/scss/theme/_interactive-box.scss
+++ b/src/scss/theme/_interactive-box.scss
@@ -69,13 +69,6 @@
     transition: border var(--ifm-transition-fast) ease;
 
     background-color: transparent;
-
-    /* Enhanced focus styles for interactive box inputs */
-    &:focus-visible {
-      outline: 2px solid var(--focus-outline-color-light);
-      outline-offset: 1px;
-      border-color: var(--focus-outline-color-light);
-    }
   }
 
   &#method select,
@@ -94,12 +87,6 @@
     appearance: auto;
     width: 1.6rem;
     height: 1.6rem;
-
-    /* Enhanced focus styles for checkboxes */
-    &:focus-visible {
-      outline: 2px solid var(--focus-outline-color-light);
-      outline-offset: 2px;
-    }
   }
 
   &#interactive-box .form-group {

From 14d98692ef7fe55ca449fb047ff30b180743ac68 Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 11 Aug 2025 14:06:34 +0200
Subject: [PATCH 3/8] chore: remove unused code

---
 src/components/AuthLogin/styles.module.scss |   7 +-
 src/scss/commons/_focus.scss                | 140 +-------------------
 2 files changed, 3 insertions(+), 144 deletions(-)

diff --git a/src/components/AuthLogin/styles.module.scss b/src/components/AuthLogin/styles.module.scss
index 29cf085b74e..346ebfcfccf 100644
--- a/src/components/AuthLogin/styles.module.scss
+++ b/src/components/AuthLogin/styles.module.scss
@@ -21,13 +21,8 @@
   top: 50%;
   transform: translate(-50%, -50%);
   overflow: auto;
+  outline: none;
   background: var(--modal-bg-color-primary);
-
-  /* Enhanced focus styles for modal accessibility */
-  &:focus-visible {
-    outline: 2px solid var(--focus-outline-color-light);
-    outline-offset: 2px;
-  }
   width: 60%;
   padding: 1.4rem;
   border-radius: 1rem;
diff --git a/src/scss/commons/_focus.scss b/src/scss/commons/_focus.scss
index 9bbbbd34c60..f89896a956a 100644
--- a/src/scss/commons/_focus.scss
+++ b/src/scss/commons/_focus.scss
@@ -1,145 +1,9 @@
-/* Focus Management System - WCAG 2.4.7 & 1.4.11 Compliant */
-
-/* 
- * Focus indicators with proper contrast ratios (minimum 3:1)
- * Uses focus-visible for better UX (keyboard navigation only)
- */
-
 :root {
-  /* Focus indicator colors with high contrast */
-  --focus-outline-color-light: #0066cc; /* Blue with high contrast */
-  --focus-outline-color-dark: #4da6ff; /* Lighter blue for dark mode */
-  --focus-outline-width: 2px;
-  --focus-outline-offset: 2px;
-  --focus-outline-style: solid;
-
-  /* Alternative focus colors for different contexts */
-  --focus-outline-warning: #ff6b00; /* Orange for warnings/errors */
-  --focus-outline-success: #00a651; /* Green for success states */
-
-  /* Box shadow focus for cases where outline doesn't work well */
-  --focus-shadow-light: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;
-  --focus-shadow-dark: 0 0 0 2px #0a0a0a, 0 0 0 4px #4da6ff;
+  --focus-outline-color-light: #0066cc;
+  --focus-outline-color-dark: #4da6ff;
 }
 
 [data-theme='dark'] {
   --focus-outline-color-light: var(--focus-outline-color-dark);
   --focus-shadow-light: var(--focus-shadow-dark);
 }
-
-/* Remove default focus styles only when we provide alternatives */
-*:focus {
-  outline: auto;
-}
-
-/* Apply focus-visible for keyboard navigation */
-*:focus-visible {
-  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
-  outline-offset: var(--focus-outline-offset);
-}
-
-/* Enhanced focus for interactive elements */
-a:focus-visible,
-button:focus-visible,
-[role='button']:focus-visible,
-[role='link']:focus-visible,
-[tabindex]:focus-visible {
-  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
-  outline-offset: var(--focus-outline-offset);
-}
-
-/* Form controls need special handling */
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
-  outline-offset: 1px; /* Tighter offset for form controls */
-}
-
-/* Checkbox and radio buttons */
-input[type='checkbox']:focus-visible,
-input[type='radio']:focus-visible {
-  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
-  outline-offset: 2px;
-}
-
-/* For elements where outline might be cut off, use box-shadow */
-.focus-shadow:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-shadow-light);
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  *:focus-visible {
-    outline-width: 3px;
-    outline-color: highlight;
-  }
-}
-
-/* Focus for elements that might have complex backgrounds */
-.focus-high-contrast:focus-visible {
-  outline: 3px solid var(--focus-outline-color-light);
-  outline-offset: 2px;
-  background-color: rgba(255, 255, 255, 0.9);
-
-  [data-theme='dark'] & {
-    background-color: rgba(0, 0, 0, 0.9);
-  }
-}
-
-/* Skip link focus (for screen reader users) */
-.skip-link:focus-visible {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  z-index: 9999;
-  padding: 8px 16px;
-  background: var(--focus-outline-color-light);
-  color: white;
-  text-decoration: none;
-  border-radius: 4px;
-  outline: 2px solid white;
-  outline-offset: 2px;
-}
-
-/* Ensure focus is visible even when using custom components */
-.custom-focus:focus-visible {
-  position: relative;
-}
-
-.custom-focus:focus-visible::after {
-  content: '';
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  bottom: -2px;
-  left: -2px;
-  border: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-/* Focus indicators that work well with rounded corners */
-.focus-rounded:focus-visible {
-  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color-light);
-  outline-offset: var(--focus-outline-offset);
-  border-radius: inherit;
-}
-
-/* Error state focus */
-.focus-error:focus-visible {
-  outline-color: var(--focus-outline-warning);
-}
-
-/* Success state focus */
-.focus-success:focus-visible {
-  outline-color: var(--focus-outline-success);
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: no-preference) {
-  *:focus-visible {
-    transition: outline-color 0.15s ease-in-out;
-  }
-}

From 6568fa9502270ff04588b6506df1aeab2de85626 Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 11 Aug 2025 14:07:47 +0200
Subject: [PATCH 4/8] chore: remove unused code

---
 src/components/Input/input.module.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/Input/input.module.scss b/src/components/Input/input.module.scss
index f7e4fcfdf07..b172d3a0e52 100644
--- a/src/components/Input/input.module.scss
+++ b/src/components/Input/input.module.scss
@@ -38,13 +38,6 @@
     width: 100%;
     margin-bottom: 4px;
 
-    /* Enhanced focus styles for better accessibility */
-    &:focus-visible {
-      outline: 2px solid var(--focus-outline-color-light);
-      outline-offset: 1px;
-      border-color: var(--focus-outline-color-light);
-    }
-
     &:disabled {
       opacity: 0.5;
       pointer-events: none;

From 611f9f4040c54e9b3f91602883ca0c7346babadc Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 11 Aug 2025 14:08:35 +0200
Subject: [PATCH 5/8] chore: remove unused code

---
 src/scss/commons/_focus.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scss/commons/_focus.scss b/src/scss/commons/_focus.scss
index f89896a956a..3d5453978a9 100644
--- a/src/scss/commons/_focus.scss
+++ b/src/scss/commons/_focus.scss
@@ -5,5 +5,4 @@
 
 [data-theme='dark'] {
   --focus-outline-color-light: var(--focus-outline-color-dark);
-  --focus-shadow-light: var(--focus-shadow-dark);
 }

From aec66d2c2c2bee05dff37b4881ede3b7da4a1c41 Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 1 Sep 2025 10:15:53 +0200
Subject: [PATCH 6/8] chore: fix props

---
 .../elements/buttons/button/index.tsx         | 49 ++++++++++++++-----
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/elements/buttons/button/index.tsx b/src/components/elements/buttons/button/index.tsx
index 64147a18d25..492e1577a74 100644
--- a/src/components/elements/buttons/button/index.tsx
+++ b/src/components/elements/buttons/button/index.tsx
@@ -115,20 +115,43 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
       textTransform !== 'none' && textTransform
     )
 
+    // Conditionally build props based on element type
+    const isLinkElement = asValue === 'link' || asValue === 'a'
+    const isButtonElement = asValue === 'button'
+    
+    const elementProps: Record<string, any> = {
+      ref: ref as React.Ref<any>,
+      'aria-label': ariaLabel,
+      onClick,
+      className: buttonClassNames,
+      style,
+      ...rest
+    }
+
+    // Add link-specific props only for link elements
+    if (isLinkElement) {
+      elementProps.href = href
+      if (external) {
+        elementProps.target = '_blank'
+        elementProps.rel = rel || 'noreferrer noopener'
+      } else if (rel) {
+        elementProps.rel = rel
+      }
+      if (download) {
+        elementProps.download = download
+      }
+    }
+
+    // Add button-specific props only for button elements
+    if (isButtonElement) {
+      elementProps.disabled = disabled
+      if (buttonType) {
+        elementProps.type = buttonType
+      }
+    }
+
     return (
-      <Component
-        ref={ref as React.Ref<any>}
-        href={asValue !== 'button' ? href : null}
-        target={asValue !== 'button' && external ? '_blank' : null}
-        rel={rel ? rel : external && asValue !== 'button' ? 'noreferrer noopener' : null}
-        aria-label={ariaLabel}
-        onClick={onClick}
-        className={buttonClassNames}
-        disabled={disabled}
-        download={as !== 'button' && download ? download : null}
-        style={style}
-        {...(asValue === 'button' && { type: buttonType })}
-        {...rest}>
+      <Component {...elementProps}>
         <span className={clsx(styles['button-holder'], labelBig && styles['label-big'])}>
           {children}
           {hasSpinner && <Spinner />}

From 308bf542175d6f2dcafce27e2932258682befb54 Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 1 Sep 2025 11:03:39 +0200
Subject: [PATCH 7/8] chore: remove comments

---
 src/components/elements/buttons/button/index.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/elements/buttons/button/index.tsx b/src/components/elements/buttons/button/index.tsx
index 492e1577a74..2304800d21f 100644
--- a/src/components/elements/buttons/button/index.tsx
+++ b/src/components/elements/buttons/button/index.tsx
@@ -115,20 +115,18 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
       textTransform !== 'none' && textTransform
     )
 
-    // Conditionally build props based on element type
     const isLinkElement = asValue === 'link' || asValue === 'a'
     const isButtonElement = asValue === 'button'
-    
+
     const elementProps: Record<string, any> = {
       ref: ref as React.Ref<any>,
       'aria-label': ariaLabel,
       onClick,
       className: buttonClassNames,
       style,
-      ...rest
+      ...rest,
     }
 
-    // Add link-specific props only for link elements
     if (isLinkElement) {
       elementProps.href = href
       if (external) {
@@ -142,7 +140,6 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
       }
     }
 
-    // Add button-specific props only for button elements
     if (isButtonElement) {
       elementProps.disabled = disabled
       if (buttonType) {

From d2530fe44be8e5bfe59552d44269a74bd177cde8 Mon Sep 17 00:00:00 2001
From: Michal Szorad <michal.szorad@consensys.net>
Date: Mon, 1 Sep 2025 11:37:56 +0200
Subject: [PATCH 8/8] chore: dont use any

---
 src/components/elements/buttons/button/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/elements/buttons/button/index.tsx b/src/components/elements/buttons/button/index.tsx
index 2304800d21f..7088b7aa307 100644
--- a/src/components/elements/buttons/button/index.tsx
+++ b/src/components/elements/buttons/button/index.tsx
@@ -118,8 +118,8 @@ const Button = forwardRef<HTMLElement, ButtonProps>(
     const isLinkElement = asValue === 'link' || asValue === 'a'
     const isButtonElement = asValue === 'button'
 
-    const elementProps: Record<string, any> = {
-      ref: ref as React.Ref<any>,
+    const elementProps: Record<string, unknown> = {
+      ref: ref as React.Ref<unknown>,
       'aria-label': ariaLabel,
       onClick,
       className: buttonClassNames,