add highlights & improve a11y

Author: SaraVieira

clients/search-component/src/TrieveModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { act, useEffect, useState } from "react";
 import { SearchChunksReqPayload, TrieveSDK } from "trieve-ts-sdk";
 import { Chunk } from "../utils/types";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -10,10 +10,15 @@ type Props = {
   onResultClick?: (chunk: Chunk) => void;
   showImages?: boolean;
   theme?: "light" | "dark";
-  searchOptions?: Omit<SearchChunksReqPayload, "query">;
+  searchOptions?: Omit<
+    Omit<SearchChunksReqPayload, "query">,
+    "highlight_options"
+  >;
   placeholder?: string;
 };
 
+export type ChunkWithHighlights = { chunk: Chunk; highlights: string[] };
+
 export const TrieveModalSearch = ({
   placeholder = "Search...",
   onResultClick,
@@ -22,23 +27,23 @@ export const TrieveModalSearch = ({
   theme = "light",
   searchOptions = {
     search_type: "hybrid",
-    highlight_options: {
-      highlight_delimiters: ["?", ",", ".", "!", "↵"],
-      highlight_max_length: 2,
-      highlight_max_num: 2,
-      highlight_strategy: "exactmatch",
-      highlight_window: 100,
-    },
   },
 }: Props) => {
   const [query, setQuery] = useState("");
-  const [results, setResults] = useState<{ chunk: Chunk }[]>([]);
+  const [results, setResults] = useState<ChunkWithHighlights[]>([]);
   const [open, setOpen] = useState(false);
 
   const search = async () => {
     const results = await trieve.search({
       ...searchOptions,
       query,
+      highlight_options: {
+        highlight_delimiters: ["?", ",", ".", "!", "↵"],
+        highlight_max_length: 2,
+        highlight_max_num: 1,
+        highlight_strategy: "exactmatch",
+        highlight_window: 10,
+      },
     });
     const resultsWithHighlight = results.chunks.map((chunk) => {
       const c = chunk.chunk as unknown as Chunk;
@@ -47,18 +52,10 @@ export const TrieveModalSearch = ({
         chunk: {
           ...chunk.chunk,
           highlight: highlightText(query, c.chunk_html),
-          highlightTitle: highlightText(
-            query,
-            c.metadata?.title || c.metadata?.page_title || c.metadata?.name
-          ),
-          highlightDescription: highlightText(
-            query,
-            c.metadata?.description || c.metadata?.page_description
-          ),
         },
       };
     });
-    setResults(resultsWithHighlight as unknown as { chunk: Chunk }[]);
+    setResults(resultsWithHighlight as unknown as ChunkWithHighlights[]);
   };
   useEffect(() => {
     if (query) {
@@ -70,6 +67,23 @@ export const TrieveModalSearch = ({
     if (e.code === "KeyK" && e.metaKey && !open) setOpen(true);
   };
 
+  const onUpOrDownClicked = (index: number, code: string) => {
+    console.log("clicked");
+    if (code === "ArrowDown") {
+      document
+        .getElementsByClassName("trieve-elements-search")[0]
+        .getElementsByClassName("item")
+        [index + 1]?.focus();
+    }
+
+    if (code === "ArrowUp") {
+      document
+        .getElementsByClassName("trieve-elements-search")[0]
+        .getElementsByClassName("item")
+        [index - 1]?.focus();
+    }
+  };
+
   useEffect(() => {
     document.addEventListener("keydown", checkForCMDK);
     return () => {
@@ -106,6 +120,7 @@ export const TrieveModalSearch = ({
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>
+        <Dialog.DialogTitle className="sr-only">Search</Dialog.DialogTitle>
         <Dialog.Overlay id="trieve-search-modal-overlay" />
         <Dialog.Content
           id="trieve-search-modal"
@@ -136,10 +151,12 @@ export const TrieveModalSearch = ({
               <kbd>ESC</kbd>
             </div>
           </div>
-          <ul>
-            {results.map((result) => (
+          <ul className="trieve-elements-search">
+            {results.map((result, index) => (
               <Item
+                onUpOrDownClicked={onUpOrDownClicked}
                 item={result}
+                index={index}
                 onResultClick={onResultClick}
                 showImages={showImages}
                 key={result.chunk.id}

clients/search-component/src/TrieveModal/item.tsx

@@ -1,17 +1,49 @@
+import { ChunkWithHighlights } from ".";
 import { Chunk } from "../utils/types";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 type Props = {
-  item: { chunk: Chunk };
+  item: ChunkWithHighlights;
   onResultClick?: (chunk: Chunk) => void;
   showImages?: boolean;
+  index: number;
+  onUpOrDownClicked: (index: number, code: string) => void;
 };
 
-export const Item = ({ item, onResultClick, showImages }: Props) => {
+export const Item = ({
+  item,
+  onResultClick,
+  showImages,
+  index,
+  onUpOrDownClicked,
+}: Props) => {
   const Component = item.chunk.link ? "a" : "button";
+  const itemRef = useRef<HTMLButtonElement | HTMLLinkElement | any>(null);
+  const title =
+    item.chunk.metadata?.title ||
+    item.chunk.metadata?.page_title ||
+    item.chunk.metadata?.name;
+
+  const checkForUpAndDown = (e: KeyboardEvent) => {
+    if (
+      (e.code === "ArrowDown" || e.code === "ArrowUp") &&
+      itemRef.current === document.activeElement
+    ) {
+      onUpOrDownClicked(index, e.code);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("keydown", checkForUpAndDown);
+    return () => {
+      document.removeEventListener("keydown", checkForUpAndDown);
+    };
+  });
+
   return (
     <li>
       <Component
+        ref={itemRef}
         className="item"
         onClick={() => onResultClick && onResultClick(item.chunk)}
         {...(item.chunk.link ? { href: item.chunk.link } : {})}
@@ -22,18 +54,12 @@ export const Item = ({ item, onResultClick, showImages }: Props) => {
           item.chunk.image_urls[0] ? (
             <img src={item.chunk.image_urls[0]} />
           ) : null}
-          {item.chunk.highlightDescription || item.chunk.highlightTitle ? (
+          {item.chunk.highlightDescription || title ? (
             <div>
-              <h4
-                dangerouslySetInnerHTML={{
-                  __html: item.chunk.highlightTitle || "",
-                }}
-              ></h4>
+              <h4>{title}</h4>
               <p
                 className="description"
-                dangerouslySetInnerHTML={{
-                  __html: item.chunk.highlightDescription || "",
-                }}
+                dangerouslySetInnerHTML={{ __html: item.highlights[0] }}
               ></p>
             </div>
           ) : (

clients/search-component/src/app.css

@@ -134,9 +134,17 @@
   .input-wrapper {
     @apply bg-zinc-900;
   }
+
+  .item {
+    @apply hover:bg-zinc-800 border-zinc-700 focus:bg-zinc-800;
+
+    .description {
+      @apply text-zinc-400;
+    }
+  }
 }
 #trieve-search-modal {
-  @apply data-[state=open]:animate-contentShow fixed top-1/2 left-1/2 max-h-[80vh] sm:max-h-[540px] w-[90vw] max-w-[550px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-zinc-50 p-2 pt-0 shadow-2xl focus:outline-none;
+  @apply data-[state=open]:animate-contentShow fixed top-1/2 left-1/2 max-h-[80vh] w-[90vw] sm:max-w-[550px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-zinc-50 p-2 pt-0 shadow-2xl focus:outline-none;
 
   .kbd-wrapper {
     @apply absolute  right-2 flex py-1.5 pr-1.5;
@@ -173,11 +181,29 @@
   }
 
   .item {
-    @apply select-none cursor-pointer p-4 text-left flex items-start gap-2  border-b border-zinc-200 w-full text-sm;
+    @apply select-none cursor-pointer p-4 text-left flex items-start gap-2  border-b border-zinc-200 w-full text-sm pr-6 bg-zinc-50 outline-none;
+
+    &:hover,
+    &:focus {
+      @apply bg-zinc-100 outline-none ring-magenta-500 ring-1 ring-inset;
+    }
+
+    &:hover .arrow-link,
+    &:focus .arrow-link {
+      @apply block;
+    }
+
+    .arrow-link {
+      @apply hidden w-4 h-4 text-zinc-600 dark:text-zinc-400 relative -right-2;
+    }
 
     > div {
       @apply flex items-center justify-between w-full;
     }
+
+    .description {
+      @apply font-normal text-xs text-zinc-600;
+    }
   }
 }