switched div to button for accessibility best practices, and modified…

… styles as needed
undp · Jul 3, 2024 · ec748c7 · ec748c7
1 parent 8cd2bce
commit ec748c7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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 {