From 2f53da17eb2b0c27e7693ddb7bf03b8ba63f996b Mon Sep 17 00:00:00 2001
From: shafin-deriv <shafin@regentmarkets.com>
Date: Thu, 15 Feb 2024 13:19:32 +0800
Subject: [PATCH] chore: fix code smells for buttons

---
 src/components/Draggable/Draggable.jsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Draggable/Draggable.jsx b/src/components/Draggable/Draggable.jsx
index 4849662f6..a50ceb440 100644
--- a/src/components/Draggable/Draggable.jsx
+++ b/src/components/Draggable/Draggable.jsx
@@ -180,46 +180,49 @@ const Draggable = ({
                     <>
                         <div
                             className='resizable-handle__top'
-                            tabIndex={0}
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, TOP)}
                             onMouseDown={e => handleMouseDown(e, TOP)}
                         />
                         <div
                             className='resizable-handle__right'
-                            tabIndex={0}
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, RIGHT)}
                             onMouseDown={e => handleMouseDown(e, RIGHT)}
                         />
                         <div
                             className='resizable-handle__bottom'
-                            tabIndex={0}
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, BOTTOM)}
                             onMouseDown={e => handleMouseDown(e, BOTTOM)}
                         />
                         <div
                             className='resizable-handle__left'
-                            tabIndex={0}
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, LEFT)}
                             onMouseDown={e => handleMouseDown(e, LEFT)}
                         />
                         <div
                             className='resizable-handle__top-right'
-                            tabIndex={0}
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, TOP_RIGHT)}
                             onMouseDown={e => handleMouseDown(e, TOP_RIGHT)}
                         />
                         <div
                             className='resizable-handle__bottom-right'
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, BOTTOM_RIGHT)}
                             onMouseDown={e => handleMouseDown(e, BOTTOM_RIGHT)}
                         />
                         <div
                             className='resizable-handle__bottom-left'
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, BOTTOM_LEFT)}
                             onMouseDown={e => handleMouseDown(e, BOTTOM_LEFT)}
                         />
                         <div
                             className='resizable-handle__top-left'
+                            role='button'
                             onKeyDown={e => handleMouseDown(e, TOP_LEFT)}
                             onMouseDown={e => handleMouseDown(e, TOP_LEFT)}
                         />