Fix contrast issues with search select dropdown

common/components/search_select.py

@@ -71,7 +71,10 @@ _ROW_HEIGHT_REM = 2.25
 # Inline class strings (ported verbatim from the retired SelectableFilter CSS)
 # so the filter combobox is fully self-styled — nothing in input.css. JS-added
 # rows/pills are cloned from server-rendered <template>s, so these strings live
-# only here — never duplicated in search_select.js.
+# only here — never duplicated in search_select.js. The keyboard-highlighted
+# state is expressed via Tailwind `data-[search-select-highlighted]` and
+# `group-data-[search-select-highlighted]` variants on the row/label/button
+# classes below; the JS only toggles the data attribute on the row.
 _FILTER_INCLUDE_PILL_CLASS = (
     "inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded "
     "bg-brand/15 text-heading"
@@ -86,17 +89,28 @@ _FILTER_MODIFIER_PILL_CLASS = (
 )
 _FILTER_PILL_REMOVE_CLASS = "ml-1 text-body hover:text-heading font-bold cursor-pointer"
 _FILTER_OPTION_ROW_CLASS = (
-    "flex items-center justify-between px-2 py-1 rounded text-sm "
+    "group flex items-center justify-between px-2 py-1 rounded text-sm "
-    "hover:bg-neutral-secondary-strong cursor-pointer"
+    "hover:bg-neutral-secondary-strong cursor-pointer "
+    "data-[search-select-highlighted]:bg-brand "
+    "data-[search-select-highlighted]:outline data-[search-select-highlighted]:outline-1 "
+    "data-[search-select-highlighted]:outline-brand-strong"
+)
+_FILTER_OPTION_LABEL_CLASS = (
+    "truncate text-body group-data-[search-select-highlighted]:text-white"
 )
-_FILTER_OPTION_LABEL_CLASS = "truncate text-body"
 _FILTER_OPTION_BUTTONS_CLASS = "flex gap-1 ml-2 shrink-0"
 # text-body keeps the +/− readable on dark backgrounds; hover:border-brand-strong
-# keeps the edge visible against the brand hover fill.
+# keeps the edge visible against the brand hover fill. When the row is the
+# keyboard-highlighted one its bg is brand, so the button text/border switch
+# to white and the hover fill shifts to brand-strong for contrast.
 _FILTER_ACTION_BUTTON_CLASS = (
     "w-5 h-5 flex items-center justify-center text-xs font-bold rounded text-body "
     "border border-brand "
-    "hover:bg-brand hover:text-white hover:border-brand-strong"
+    "hover:bg-brand hover:text-white hover:border-brand-strong "
+    "group-data-[search-select-highlighted]:text-white "
+    "group-data-[search-select-highlighted]:border-white "
+    "group-data-[search-select-highlighted]:hover:bg-brand-strong "
+    "group-data-[search-select-highlighted]:hover:border-white"
 )
 _FILTER_MODIFIER_ROW_CLASS = (
     "px-2 py-1 text-sm text-body hover:bg-neutral-secondary-strong cursor-pointer"

games/static/base.css

@@ -2892,6 +2892,16 @@
       }
     }
   }
+  .group-data-\[search-select-highlighted\]\:border-white {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      border-color: var(--color-white);
+    }
+  }
+  .group-data-\[search-select-highlighted\]\:text-white {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      color: var(--color-white);
+    }
+  }
   .placeholder\:text-body {
     &::placeholder {
       color: var(--color-body);
@@ -3160,6 +3170,24 @@
       }
     }
   }
+  .group-data-\[search-select-highlighted\]\:hover\:border-white {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-white);
+        }
+      }
+    }
+  }
+  .group-data-\[search-select-highlighted\]\:hover\:bg-brand-strong {
+    &:is(:where(.group)[data-search-select-highlighted] *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-brand-strong);
+        }
+      }
+    }
+  }
   .focus\:z-10 {
     &:focus {
       z-index: 10;
@@ -3259,6 +3287,28 @@
       outline-style: none;
     }
   }
+  .data-\[search-select-highlighted\]\:bg-brand {
+    &[data-search-select-highlighted] {
+      background-color: var(--color-brand);
+    }
+  }
+  .data-\[search-select-highlighted\]\:outline {
+    &[data-search-select-highlighted] {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .data-\[search-select-highlighted\]\:outline-1 {
+    &[data-search-select-highlighted] {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .data-\[search-select-highlighted\]\:outline-brand-strong {
+    &[data-search-select-highlighted] {
+      outline-color: var(--color-brand-strong);
+    }
+  }
   .sm\:table-cell {
     @media (width >= 40rem) {
       display: table-cell;

games/static/js/search_select.js

@@ -77,16 +77,14 @@
     function highlightOption(row) {
       clearHighlight();
       if (!row) return;
-      row.style.backgroundColor = "var(--color-brand, rgba(59, 130, 246, 0.15))";
+      row.setAttribute("data-search-select-highlighted", "");
-      row.style.outline = "1px solid var(--color-brand, #3b82f6)";
       highlightedRow = row;
       row.scrollIntoView({ block: "nearest" });
     }
 
     function clearHighlight() {
       if (highlightedRow) {
-        highlightedRow.style.backgroundColor = "";
+        highlightedRow.removeAttribute("data-search-select-highlighted");
-        highlightedRow.style.outline = "";
         highlightedRow = null;
       }
     }