Fix NTP realbox dropdown in Forced-colors mode

The box-shadow property isn't shown in forced colors mode,
so give the realbox dropdown a real border instead.

In addition, the color used to highlight a dropdown item
when focused or hovered is ignored in forced-colors mode,
so set it to specific system colors that are respected
in that mode.

See bug for before/after screenshots.

Bug: 1166383
Change-Id: I537cd4dcf7be8b9539517cc9783295a29519f55a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2627820Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#843700}

chrome/browser/resources/new_tab_page/realbox_dropdown.html

@@ -14,6 +14,12 @@
     padding-top: var(--ntp-realbox-height);
   }
 
+  @media (forced-colors: active) {
+    #selector {
+      border: 1px solid ActiveBorder;
+    }
+  }
+
   ntp-realbox-match {
     color: var(--search-box-results-text);
   }
@@ -68,6 +74,17 @@
     background-color: var(--search-box-results-bg-selected, rgba(var(--google-grey-900-rgb), .16));
     color: var(--search-box-results-text-selected, var(--google-grey-900));
   }
+
+  @media (forced-colors: active) {
+    ntp-realbox-match:hover,
+    .header:hover {
+      background-color: Highlight;
+    }
+    ntp-realbox-match:-webkit-any(:focus-within, .selected),
+    .header:focus-within:not(:focus) {
+      background-color: Highlight;
+    }
+  }
 </style>
 <iron-selector id="selector" selectable="ntp-realbox-match"
     items="{{selectableMatchElements_}}" selected="{{selectedMatchIndex}}"