Fixes for forced-colors active

plugins/beta/map-styles/src/mapStyles.scss

@@ -33,8 +33,13 @@
 
 .im-c-map-styles__image {
   position: relative;
-  padding: 2px;
-  border: 3px solid transparent;
+  padding: 1px;
+  border: 4px solid transparent;
+  margin-bottom: 2px;
+
+  @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+    border-width: 2px;
+  }
 }
 
 .im-c-map-styles__image svg {
@@ -48,7 +53,7 @@
 
 .im-c-map-styles img {
   display: block;
-  // border: 1px solid var(--image-placeholder-color);
+
 } 
 
 // Text size
@@ -66,16 +71,25 @@
   outline: 0;
 }
 
-.im-c-map-styles__button[data-focus-visible="true"] {
-  .im-c-map-styles__image::after {
+.im-c-map-styles__button[aria-pressed="true"] .im-c-map-styles__image::after {
+  @media (-ms-high-contrast:active), screen and (forced-colors: active) {
     content: '';
     position: absolute;
-    top: -3px;
-    right: -3px;
-    bottom: -3px;
-    left: -3px;
-    outline: 3px solid var(--focus-outline-color);
-    border: 3px solid var(--focus-border-color);
+    inset: -4px;
+    border: 4px solid var(--focus-border-color);
+  }
+}
+
+.im-c-map-styles__button[data-focus-visible="true"] .im-c-map-styles__image::after {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  outline: 3px solid var(--focus-outline-color);
+  border: 4px solid var(--focus-border-color);
+
+  @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+    outline-offset: 1px;
+    outline-color: Highlight;
   }
 }
 

plugins/search/src/components/CloseButton/CloseButton.module.scss

@@ -4,7 +4,12 @@
   &:before {
     box-shadow: none;
   }
+
   &[data-focus-visible="true"] {
     z-index: 1;
   }
+
+  &:hover {
+    z-index: 1;
+  }
 }

plugins/search/src/components/Form/Form.module.scss

@@ -37,7 +37,7 @@
 
   .im-c-search-suggestions {
     position: absolute;
-    top: calc(100% + 1px);
+    top: calc(100% + 2px);
     left: 0;
     right: 0;
     z-index: 1;

plugins/search/src/components/Suggestions/Suggestions.module.scss

@@ -19,11 +19,19 @@
     border-top: 1px solid var(--button-hover-color);
     cursor: pointer;
 
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+        color: Highlight;
+    }
+
     mark {
         font-weight: bold;
         color: var(--foreground-color);
         background-color: transparent;
         pointer-events: none;
+
+        @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+           color: Highlight;
+        }
     }
 
     &:hover:not([aria-selected="true"]) {
@@ -38,6 +46,10 @@
 
     &[aria-selected="true"] mark {
         color: var(--fixed-foreground-color);
+
+        @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+           color: Highlight;
+        }
     }
 
     &:hover:not([aria-selected="true"]) .im-c-search-suggestions__label {

plugins/search/src/search.scss

@@ -32,19 +32,31 @@
     content: '';
     z-index: 1;
     position: absolute;
-    top: -1px;
-    right: -1px;
-    bottom: -1px;
-    left: -1px;
+    top: -2px;
+    right: -2px;
+    bottom: -2px;
+    left: -2px;
     border-radius: var(--button-border-radius);
     border: 2px solid var(--foreground-color);
     pointer-events: none;
+
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+      border-color: ButtonText;
+    }
+  }
+
+  // Excludes the close button so its own hover indicator (shared via
+  // .im-c-map-button) doesn't also light up this container's ring.
+  &:hover:not(:has(.im-c-search-close-button:hover)):before {
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+      border-color: Highlight;
+    }
   }
 
   &:after {
     @include tools.focus-base($type: 'button');
     opacity: 0;
-    
+
     @media (prefers-reduced-motion: no-preference) {
       transition: opacity var(--duration) ease;
     }
@@ -64,6 +76,11 @@
   &:focus {
     outline: 3px solid transparent;
     box-shadow: none;
+
+    // The container's own :before is the only focus indicator we want.
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+      outline: none;
+    }
   }
 
   &::placeholder {
@@ -107,6 +124,27 @@
   margin: var(--primary-gap);
 }
 
+.im-c-search__input-container--keyboard-focus-within:before {
+  @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+    border-color: Highlight;
+  }
+}
+
 .im-c-search__input-container--keyboard-focus-within:after {
   opacity: 1;
+
+  // Forced-colors uses a Highlight outline on the container itself instead
+  // (see below); hiding this avoids a mega-thick double ring that
+  // doesn't pick up forced colors correctly.
+  @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+    opacity: 0;
+  }
+}
+
+// A real outline (not the :before border) so it sits flush against the real
+// edge and grows outward exactly like the close button's own focus ring.
+.im-c-search__input-container--keyboard-focus-within {
+  @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+    outline: var(--focus-highlight-width) solid Highlight;
+  }
 }

sonar-project.properties

@@ -17,7 +17,7 @@ sonar.test.inclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**
 sonar.cpd.exclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**
 
 # Ignored rules
-sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx,preferGlobalThisJs,preferGlobalThisJsx,preferAtJs,preferAtJsx,replaceAllJs,replaceAllJsx,stringReplaceAllJs,stringReplaceAllJsx,pascalCaseFunctionsJs,pascalCaseFunctionsJsx,pascalCaseFunctionsTs,pascalCaseFunctionsTsx
+sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx,preferGlobalThisJs,preferGlobalThisJsx,preferAtJs,preferAtJsx,replaceAllJs,replaceAllJsx,stringReplaceAllJs,stringReplaceAllJsx,pascalCaseFunctionsJs,pascalCaseFunctionsJsx,pascalCaseFunctionsTs,pascalCaseFunctionsTsx,cssScopingRootMixins
 
 # S6774: React props validation - using TypeScript/JSDoc for prop types instead
 sonar.issue.ignore.multicriteria.reactPropsJs.ruleKey=javascript:S6774
@@ -58,3 +58,8 @@ sonar.issue.ignore.multicriteria.pascalCaseFunctionsTs.ruleKey=javascript:S100
 sonar.issue.ignore.multicriteria.pascalCaseFunctionsTs.resourceKey=**/*.ts
 sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.ruleKey=javascript:S100
 sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.resourceKey=**/*.tsx
+
+# S8776: Missing scoping root for & - false positive on Sass mixins, which are always
+# @included inside a real selector so & resolves correctly once compiled
+sonar.issue.ignore.multicriteria.cssScopingRootMixins.ruleKey=css:S8776
+sonar.issue.ignore.multicriteria.cssScopingRootMixins.resourceKey=src/scss/tools/**/*.scss

src/App/components/MapButton/MapButton.module.scss

@@ -70,6 +70,14 @@
 
         background-color: var(--button-hover-color);
     }
+
+    // Excludes focus-visible so the thicker focus outline (border-focus-base)
+    // always wins when a button is both hovered and keyboard-focused.
+    .im-c-map-button:hover:not([data-focus-visible="true"]) {
+        @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+            outline: var(--hover-outline-width) solid Highlight;
+        }
+    }
 }
 
 // 2. Elements
@@ -172,6 +180,7 @@
 }
 
 // 4. State styles
+
 .im-c-map-button[aria-haspopup="menu"][aria-expanded="true"] svg {
     transform: rotate(180deg);
 }

src/App/components/Panel/Panel.module.scss

@@ -63,6 +63,10 @@
         outline: var(--scrollable-outline);
         outline-offset: var(--scrollable-outline-offset);
         box-shadow: var(--scrollable-box-shadow);
+
+        @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+            outline-width: 4px;
+        }
     }
 }
 
@@ -76,6 +80,11 @@
     }
 
     background-color: var(--button-hover-color);
+
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+      border: 2px solid Highlight;
+      padding: calc(var(--button-padding) - 2px);
+    }
 }
 
 // 3. Modifiers
@@ -108,4 +117,4 @@
 
 // 4. State styles
 
-// 5. Responsive tweaks
+// 5. Responsive tweaks

src/App/components/Tabs/Tabs.module.scss

@@ -28,6 +28,20 @@
     font-weight: normal;
     outline: 3px solid transparent;
 
+    // The tab's own outline is otherwise invisible when focused, so forced-colors
+    // would substitute a default ring around the whole button. The label carries
+    // the intended ring (via link-focus below), so suppress this one entirely
+    // and leave the 1px border untouched.
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+        outline: none;
+    }
+
+    .im-c-tabs__label {
+        @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+            color: Highlight;
+        }
+    }
+
     &[aria-selected='true'] {
         background: var(--background-color);
         border-color: var(--app-border-color);
@@ -39,6 +53,16 @@
     &:focus .im-c-tabs__label {
         @include tools.link-focus;
     }
+
+    // Chromium/Firefox force a native button's border to Highlight on
+    // :hover/:focus regardless of author border-color. Pin it to the system
+    // equivalent of "currentColor" so hovering/focusing a tab doesn't change
+    // its border — only the label (above) should react to focus.
+    &:hover, &:focus {
+        @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+            border-color: ButtonBorder;
+        }
+    }
 }
 
 .im-c-tabs__tab:not([aria-selected='true']) {

src/App/components/Tooltip/Tooltip.module.scss

@@ -51,6 +51,10 @@
     height: var(--tooltip-arrow-size);
     color: var(--tooltip-background-color);
     border: calc(var(--tooltip-arrow-size) / 2) solid currentcolor;
+
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+        border-color: Canvas;
+    }
 }
 
 // 2. Elements

src/App/layout/layout.module.scss

@@ -503,10 +503,10 @@
 .im-o-app--mobile .im-o-app__drawer .im-c-panel::after,
 .im-o-app--mobile .im-o-app__actions .im-c-panel::after,
 .im-o-app__modal .im-c-panel--drawer::after {
-  top: var(--focus-border-width);
-  right: var(--focus-border-width);
-  bottom: var(--focus-border-width);
-  left: var(--focus-border-width);
+  top: var(--focus-box-shadow-width);
+  right: var(--focus-box-shadow-width);
+  bottom: var(--focus-box-shadow-width);
+  left: var(--focus-box-shadow-width);
 }
 
 // 4. State styles

src/scss/settings/_colors.scss

@@ -21,7 +21,7 @@
     // Scrollable content
     --scrollable-outline: 3px solid #ffdd00;
     --scrollable-outline-offset: -3px;
-    --scrollable-box-shadow: inset 0 0 0 6px #002d18;
+    --scrollable-box-shadow: inset 0 0 0 7px #002d18;
 
     // Tooltips
     --tooltip-background-color: #383F43;

src/scss/settings/_dimensions.scss

@@ -14,8 +14,11 @@
     --app-border-width: 1px;
     --button-border-radius: 0px; // 4px;
     --panel-border-radius: 0px; // 8px;
-    --focus-border-width: 3px;
-    --focus-outline-width: 3px;
+    --focus-border-width: 4px; // The black inner focus stroke
+    --focus-box-shadow-width: 3px; // The yellow outer focus stroke
+    --focus-highlight-width: 4px;
+    --focus-outline-width: 3px; // Transparent, used for forced-colors focus
+    --hover-outline-width: 2px; // Used with forced-colors hover state
 
     // Modal offset placeholders (These are set with JS)
     --modal-offset-top: 0px;