diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss index f1ef68a9cde8..a388acdc4944 100644 --- a/packages/components/src/components/ui-shell/_header.scss +++ b/packages/components/src/components/ui-shell/_header.scss @@ -66,6 +66,13 @@ .#{$prefix}--header__action:focus { border-color: $shell-header-focus; outline: none; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } .#{$prefix}--header__action:active { @@ -198,6 +205,13 @@ color: $shell-header-text-01; border-color: $shell-header-focus; outline: none; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } a.#{$prefix}--header__menu-item:hover > svg, diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss index eb339d67d30f..d32390ca95c3 100644 --- a/packages/components/src/components/ui-shell/_side-nav.scss +++ b/packages/components/src/components/ui-shell/_side-nav.scss @@ -377,6 +377,13 @@ .#{$prefix}--side-nav__submenu:focus { @include focus-outline('outline'); + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } .#{$prefix}--side-nav__submenu-title { @@ -508,6 +515,13 @@ a.#{$prefix}--side-nav__link:focus, .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus { @include focus-outline('outline'); + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + outline: 3px solid transparent; + outline-offset: -3px; + } } a.#{$prefix}--side-nav__link[aria-current='page'], @@ -553,6 +567,12 @@ width: mini-units(2); height: mini-units(2); fill: $shell-side-nav-icon-01; + + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon { @@ -665,6 +685,13 @@ .#{$prefix}--header__menu-arrow, .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow { fill: $shell-side-nav-text-01; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } }