From 73eab9280d2771472f612ee4f91dd7e7a2f7bdab Mon Sep 17 00:00:00 2001
From: Kenny <adelekekehinde06@gmail.com>
Date: Thu, 12 Oct 2023 04:33:36 +0100
Subject: [PATCH] Fix a11y issues with Badge component (#2721)

* fix: a11y issues in badge component

* fix: spacing issues with button element
---
 ts/components/Badge.svelte | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/ts/components/Badge.svelte b/ts/components/Badge.svelte
index d395bdbb7..8514da27f 100644
--- a/ts/components/Badge.svelte
+++ b/ts/components/Badge.svelte
@@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 </script>
 
-<span
+<button
     bind:this={spanRef}
     title={tooltip}
     class="badge {className}"
@@ -35,11 +35,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <IconConstrain {iconSize} {widthMultiplier} {flipX}>
         <slot />
     </IconConstrain>
-</span>
+</button>
 
 <style>
     .badge {
         color: var(--badge-color, inherit);
+        border: none;
+        background: transparent;
+        padding: 0;
+    }
+
+    .badge:hover,
+    .badge:active {
+        border: none;
+        background: transparent;
+        box-shadow: none;
     }
 
     .dropdown-toggle::after {