added border to tooltip dropdown for high contrast & fix arrow

- fixes #8830

CHANGELOG.txt

@@ -151,6 +151,7 @@ Changelog
  * Fix: Prevent comment buttons from overlapping with fields (Thibaud Colas)
  * Fix: Resolve MySQL search compatibility issue with Django 4.1 (Andy Chosak)
  * Fix: Ensure that the fields on login and password reset forms are visible in forced colors mode (Paarth Agarwal)
+ * Fix: Missing a outline on dropdown content and malformed tooltip arrow in forced colors mode (Anuja Verma, LB (Ben) Johnston)
 
 
 3.0.1 (16.06.2022)

client/scss/components/_dropdown.scss

@@ -74,6 +74,10 @@
   // Override any right alignment that might've been set by a parent element
   // (such as the snippets header)
   text-align: start;
+
+  @media (forced-colors: active) {
+    border: 2px solid transparent;
+  }
 }
 
 .c-dropdown__item {

client/scss/overrides/_utilities.dropdowns.scss

@@ -3,9 +3,12 @@
 // =============================================================================
 .u-arrow:before {
   content: '';
-  border: solid 0.35rem transparent;
+  background: transparent;
   display: block;
   position: absolute;
+  clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  height: 0.5rem;
+  width: 0.75rem;
 }
 
 .u-arrow--tl:before {
@@ -21,10 +24,6 @@
 // =============================================================================
 //  Default dropdown theme
 // =============================================================================
-
-// .t-default {
-
-// }
 .t-default .u-btn-current {
   border-color: $color-grey-4;
   color: $color-teal;
@@ -63,7 +62,11 @@
 }
 
 .t-dark .u-arrow:before {
-  border-bottom-color: $color-grey-1;
+  background-color: $color-grey-1;
+
+  @media (forced-colors: active) {
+    background-color: ButtonText;
+  }
 }
 
 // =============================================================================

docs/releases/4.0.md

@@ -68,6 +68,7 @@ In Wagtail 2.16, we introduced support for Windows High Contrast mode (WHCM). Th
 * Add a border around modal dialogs so they can be identified in forced colors mode
 * Ensure disabled buttons are distinguishable from active buttons in forced colors mode
 * Ensure that the fields on login and password reset forms are visible in forced colors mode
+* Missing a outline on dropdown content and malformed tooltip arrow in forced colors mode
 
 ### UX unification and consistency improvements