diff --git a/packages/usa-button/src/styles/_usa-button.scss b/packages/usa-button/src/styles/_usa-button.scss index a53ae8fc5a..14191fe417 100755 --- 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 index e9d3b06e87..51cac7b4d0 100644 --- 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 index e11cb68c06..4e84096d78 100644 --- 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 index 02101ff7a6..2b53703278 100644 --- 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 index 56dd5edce6..ae329d1216 100644 --- 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 index bfdab6ebd3..c0188df5ff 100644 --- 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 index ade8ca8e1b..4e046d05c1 100644 --- 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 index b778901746..7436bf5c48 100644 --- 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 new file mode 100644 index 0000000000..cf503cc28c --- /dev/null +++ b/packages/uswds-core/src/styles/variables/border-high-contrast.scss @@ -0,0 +1 @@ +$border-high-contrast: 2px solid transparent;