adds border to all states of toggle control

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 8.0.7
+### Changed
+- Added border for all states of toggle control for visibility in high contrast mode
+
 ## 8.0.6
 ### Changed
 - Added box-shadow to search bar to be accessible on light mastheads.

lib/components/Toggle/Toggle.module.scss

@@ -28,6 +28,7 @@ $line-height: 3.5*$grid-size;
 
         .toggle-switch {
             background-color: var(--color-foreground-default);
+            border: 1px solid var(--color-foreground-default);
         }
     }
 
@@ -49,6 +50,7 @@ $line-height: 3.5*$grid-size;
         .toggle-switch {
             left: 25px;
             background-color: var(--color-accent-foreground);
+            border: 1px solid var(--color-accent-foreground);
 
             @include rtl {
                 left: unset;
@@ -64,6 +66,7 @@ $line-height: 3.5*$grid-size;
 
             .toggle-switch {
                 background-color: var(--color-state-disabled);
+                border: 1px solid var(--color-state-disabled);
             }
         }
     }
@@ -76,6 +79,7 @@ $line-height: 3.5*$grid-size;
 
         .toggle-switch {
             background-color: var(--color-foreground-disabled);
+            border: 1px solid var(--color-foreground-disabled);
         }
 
         .toggle-label {
@@ -114,6 +118,7 @@ $line-height: 3.5*$grid-size;
     height: 2.5*$grid-size;
     border-radius: $toggle-switch-border-radius;
     background-color: var(--color-foreground-inactive);
+    border: 1px solid var(--color-foreground-inactive);
     transition: $toggle-switch-transition;
 
     pointer-events: none;
@@ -131,4 +136,4 @@ $line-height: 3.5*$grid-size;
     font-size: var(--font-size-default);
 
     vertical-align: middle;
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "8.0.6",
+    "version": "8.0.7",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",