Switch block previews from hover + toggle to toggle only

Author: thibaudcolas

client/src/components/ComboBox/ComboBox.scss

@@ -137,6 +137,15 @@ $width: clamp(300px, 75vw, 1000px);
   &:hover {
     color: theme('colors.icon-secondary-hover');
   }
+
+  &[aria-expanded='true'] {
+    color: theme('colors.text-link-default');
+
+    @media (forced-colors: active) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
 }
 
 .w-combobox__option-row--col1 {

client/src/components/ComboBox/ComboBox.tsx

@@ -68,6 +68,7 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
     (category) => category.items || [],
   );
   const [inputItems, setInputItems] = useState<ComboBoxOption[]>(flatItems);
+  const [previewedIndex, setPreviewedIndex] = useState<number>(-1);
   // Re-create the categories so the two-column layout flows as expected.
   const categories = items.reduce<ComboBoxCategory<ComboBoxOption>[]>(
     (cats, cat, index) => {
@@ -88,7 +89,6 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
     getMenuProps,
     getInputProps,
     getItemProps,
-    highlightedIndex,
     setHighlightedIndex,
     setInputValue,
     openMenu,
@@ -153,12 +153,11 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
       setInputItems(filtered);
       // Always reset the first item to highlighted on filtering, to speed up selection.
       setHighlightedIndex(0);
+      // Hide any preview when the user starts typing.
+      setPreviewedIndex(-1);
     },
   });
 
-  const [lastHighlightedIndex, setLastHighlightedIndex] =
-    useState(highlightedIndex);
-
   useEffect(() => {
     if (inputValue) {
       openMenu();
@@ -178,15 +177,8 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
     }
   }, [inputValue]);
 
-  if (
-    inputItems[highlightedIndex] &&
-    highlightedIndex !== lastHighlightedIndex
-  ) {
-    setLastHighlightedIndex(highlightedIndex);
-  }
-
   const previewedBlock =
-    inputItems[highlightedIndex] || inputItems[lastHighlightedIndex];
+    typeof previewedIndex !== 'undefined' ? inputItems[previewedIndex] : null;
 
   return (
     <div className="w-combobox-container">
@@ -283,8 +275,13 @@ export default function ComboBox<ComboBoxOption extends ComboBoxItem>({
                         <button
                           className="w-combobox__option-preview"
                           aria-label={comboBoxPreviewLabel}
+                          aria-expanded={previewedIndex === itemIndex}
                           type="button"
-                          onClick={() => setHighlightedIndex(itemIndex)}
+                          onClick={() =>
+                            setPreviewedIndex(
+                              previewedIndex === itemIndex ? -1 : itemIndex,
+                            )
+                          }
                         >
                           <Icon name="view" />
                         </button>