uswds · thisisdano · May 10, 2023 · Feb 13, 2023 · Feb 13, 2023 · Feb 13, 2023
diff --git a/packages/usa-button/src/styles/_usa-button.scss b/packages/usa-button/src/styles/_usa-button.scss
@@ -51,6 +51,12 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
   &[aria-disabled="true"] {
     @include button-disabled;
   }
+
+  @media (forced-colors: active) {
+    &:not(.usa-button--unstyled) {
+      border: $border-high-contrast;
+    }
+  }
 }
 
 .usa-button--accent-cool {

diff --git a/packages/usa-date-picker/src/styles/_usa-date-picker.scss b/packages/usa-date-picker/src/styles/_usa-date-picker.scss
@@ -199,6 +199,13 @@ $navigate_far_next: map-merge(
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media (forced-colors: active) {
+    &:not([disabled]):hover {
+      outline: $border-high-contrast;
+      outline-offset: -2px;
+    }
+  }
 }
 
 // Date Picker - Date Selection View
@@ -458,7 +465,7 @@ $navigate_far_next: map-merge(
     background-image: none;
 
     &:hover {
-      outline: 2px solid transparent;
+      border: $border-high-contrast;
       background-color: transparent;
     }
   }
@@ -472,7 +479,7 @@ $navigate_far_next: map-merge(
     background-image: none;
 
     &:hover {
-      outline: 2px solid transparent;
+      border: $border-high-contrast;
       background-color: transparent;
     }
   }

diff --git a/packages/usa-pagination/src/styles/_usa-pagination.scss b/packages/usa-pagination/src/styles/_usa-pagination.scss
@@ -133,7 +133,7 @@ $pagination-hover-token: list.nth($pagination-link-tokens, 2);
     border-color: color($pagination-hover-token);
 
     @media (forced-colors: active) {
-      border: 2px solid buttonText;
+      border: $border-high-contrast;
     }
   }
 }
@@ -149,7 +149,7 @@ $pagination-hover-token: list.nth($pagination-link-tokens, 2);
   color: color($text-color);
 
   @media (forced-colors: active) {
-    outline: 2px solid buttonText;
+    border: $border-high-contrast;
     color: buttonText;
   }
 

diff --git a/packages/usa-range/src/styles/_usa-range.scss b/packages/usa-range/src/styles/_usa-range.scss
@@ -22,7 +22,7 @@
   cursor: pointer;
 
   @media (forced-colors: active) {
-    outline: 2px solid transparent;
+    outline: $border-high-contrast;
   }
 }
 

diff --git a/packages/usa-search/src/styles/_usa-search.scss b/packages/usa-search/src/styles/_usa-search.scss
@@ -38,9 +38,12 @@ $search-icon: (
     }
 
     @media (forced-colors: active) {
-      border: 2px solid transparent;
       @include place-icon($search-icon, "before");
 
+      &:focus {
+        outline-offset: 0;
+      }
+
       &::before {
         @include at-media("mobile-lg") {
           content: none;

diff --git a/packages/uswds-core/src/styles/mixins/general/button-disabled.scss b/packages/uswds-core/src/styles/mixins/general/button-disabled.scss
@@ -14,7 +14,6 @@
   &:focus,
   &.usa-focus {
     background-color: color("disabled");
-    border: 0;
     box-shadow: none;
   }
 }
diff --git a/packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss b/packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss
@@ -3,6 +3,7 @@
 
 @use "../../functions" as *;
 @use "../../settings" as *;
+@use "../../variables/border-high-contrast" as *;
 @use "../general/add-background-svg" as *;
 @use "format-input" as *;
 @use "format-label" as *;
@@ -66,7 +67,7 @@
         color.adjust(color($input-text-color), $alpha: $input-border-alpha);
 
       @media (forced-colors: active) {
-        outline: 2px solid transparent;
+        outline: $border-high-contrast;
         outline-offset: 2px;
       }
     }

diff --git a/packages/uswds-core/src/styles/variables/_index.scss b/packages/uswds-core/src/styles/variables/_index.scss
@@ -1,4 +1,5 @@
 @forward "aspect-ratios";
+@forward "border-high-contrast";
 @forward "border-radius";
 @forward "color-families";
 @forward "color-palette-grayscale";

diff --git a/packages/uswds-core/src/styles/variables/border-high-contrast.scss b/packages/uswds-core/src/styles/variables/border-high-contrast.scss
@@ -0,0 +1 @@
+$border-high-contrast: 2px solid transparent;