From ec748c7bc59258d7d40ad53c0ee680f3330602ef Mon Sep 17 00:00:00 2001
From: Caleb Luster <cwl117@outlook.com>
Date: Wed, 3 Jul 2024 10:26:28 -0500
Subject: [PATCH] switched div to button for accessibility best practices, and
 modified styles as needed

---
 .../Components/UIcomponents/Buttons/Switch/Switch.jsx |  7 +++++--
 .../UIcomponents/Buttons/Switch/switch.scss           | 11 ++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/stories/Components/UIcomponents/Buttons/Switch/Switch.jsx b/stories/Components/UIcomponents/Buttons/Switch/Switch.jsx
index 2227539dc..456961ea5 100644
--- a/stories/Components/UIcomponents/Buttons/Switch/Switch.jsx
+++ b/stories/Components/UIcomponents/Buttons/Switch/Switch.jsx
@@ -39,11 +39,14 @@ export function Switch({
       <div className={switchClass} onClick={handleToggle} {...args}>
         {showLabel && <div className="switch__label">{label}</div>}
         <div className='switch__wrapper'>
-        <div className="switch__track" tabIndex={0}>
+        <button 
+          className="switch__track" 
+          tabIndex={0}
+        >
         {showIcon && <div className='switch__icon'/>}
           <div className="switch__thumb">
           </div>
-        </div>
+        </button>
         {showValue && (
           <span className="switch__value">
             {toggled ? valueOn : valueOff}
diff --git a/stories/Components/UIcomponents/Buttons/Switch/switch.scss b/stories/Components/UIcomponents/Buttons/Switch/switch.scss
index 755e4a4e1..ed8aff264 100644
--- a/stories/Components/UIcomponents/Buttons/Switch/switch.scss
+++ b/stories/Components/UIcomponents/Buttons/Switch/switch.scss
@@ -11,15 +11,16 @@
     background-color: $color-gray-400;
     border-radius: 20px;
     position: relative;
-    width: 52px;
-    height: 1.5rem;
-    padding: 3px 4px 3px 4px;
+    width: 60px;
+    height: 30px;
     gap: 5px;
     border-radius: 20px;
+    border: none;
+    cursor: pointer;
 
     .switch--small & {
-      width: 2rem;
-      height: 14px;
+      width: 40px;
+      height: 20px;
     }
 
     &:focus {