From d480d2576147fea566a50a01bdb1bce23a6fb1a7 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 16 Jun 2021 11:37:41 +0200
Subject: [PATCH] refactor(controls): use button element for buttons instead of
 divs closes #1228

---
 src/additional-components/Controls/index.tsx | 6 +++---
 src/style.css                                | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx
index 02ab1cf3..5e4ece7f 100644
--- a/src/additional-components/Controls/index.tsx
+++ b/src/additional-components/Controls/index.tsx
@@ -23,12 +23,12 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   onInteractiveChange?: (interactiveStatus: boolean) => void;
 }
 
-export interface ControlButtonProps extends HTMLAttributes<HTMLDivElement> {}
+export interface ControlButtonProps extends HTMLAttributes<HTMLButtonElement> {}
 
 export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
-  <div className={cc(['react-flow__controls-button', className])} {...rest}>
+  <button className={cc(['react-flow__controls-button', className])} {...rest}>
     {children}
-  </div>
+  </button>
 );
 
 const Controls: FC<ControlProps> = ({
diff --git a/src/style.css b/src/style.css
index 53a4dd3c..327cfbef 100644
--- a/src/style.css
+++ b/src/style.css
@@ -171,6 +171,7 @@
   &-button {
     width: 24px;
     height: 24px;
+    border: none;
 
     svg {
       width: 100%;