fixed checkbox focus issue in high constrast mode (#5265)

* fixed checkbox focus issue in high constrast mode

* added the fallback token

* added release notes

* added token

* The Patch number updated to v2.22.1

---------

Co-authored-by: Manjunath Kalburgi <[email protected]>

Author: manjunathkalburgi

RELEASENOTES.general.md

@@ -3,6 +3,7 @@
 
 ## 2.22.0 - August 16, 2023
 
+- Fixed the checkbox to high contrast when the focus is placed on it.
 - Updated icons to `v10.7.0`
   - Standard Set:
     - Added `attribute_based_pricing`

ui/components/checkbox/RELEASENOTES.md

@@ -3,6 +3,10 @@
 # Checkbox Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.1
+
+### Fixed
+- Fixed the checkbox to high contrast when the focus is placed on it.
 
 ## 2.18.0
 

ui/components/checkbox/base/_index.scss

@@ -106,6 +106,8 @@
       + .slds-checkbox__label .slds-checkbox--faux {
         // @todo consider shared hooks for inputs
 
+        outline: 1px solid var(--slds-g-color-brand-base-80, #{$palette-blue-80});
+        outline-offset: 0px;
         /*! @css-var-fallback border-color */
         --slds-c-checkbox-color-border: var(--slds-c-checkbox-color-border-focus, var(--sds-c-checkbox-color-border-focus, var(--slds-g-color-brand-base-60, #{$color-border-input-active})));
 
@@ -125,6 +127,20 @@
       }
     }
 
+    &:focus-visible {
+
+      + .slds-checkbox_faux,
+      + .slds-checkbox--faux,
+      ~ .slds-checkbox_faux,
+      ~ .slds-checkbox--faux,
+      + .slds-checkbox__label .slds-checkbox_faux,
+      + .slds-checkbox__label .slds-checkbox--faux {
+        // @todo consider shared hooks for inputs
+        outline: 1px solid var(--slds-g-color-brand-base-80, #{$palette-blue-80});
+        outline-offset: 0px;
+      }
+    }
+
     &:indeterminate + .slds-checkbox_faux,
     &:indeterminate + .slds-checkbox--faux,
     &:indeterminate ~ .slds-checkbox_faux,