fix: modal search focus trap

Author: g-francesca

apps/site/components/Common/Searchbox/ChatActions/index.module.css

@@ -21,9 +21,12 @@
     text-neutral-800
     duration-300
     hover:bg-neutral-300
+    focus:bg-neutral-300
+    focus:outline-none
     motion-safe:transition-colors
     dark:text-neutral-400
-    dark:hover:bg-neutral-900;
+    dark:hover:bg-neutral-900
+    dark:focus:bg-neutral-900;
 
   svg {
     @apply size-4;

apps/site/components/Common/Searchbox/ChatInput/index.module.css

@@ -34,12 +34,15 @@
     p-2
     text-white
     duration-300
+    focus:bg-green-600/75
+    focus:outline-none
     disabled:cursor-not-allowed
     disabled:bg-neutral-200/60
     disabled:text-neutral-800
     motion-safe:transition-colors
     dark:bg-green-400
     dark:text-neutral-400
+    focus:dark:bg-green-400/75
     disabled:dark:bg-neutral-900/60;
 
   svg {
@@ -85,9 +88,12 @@
     text-neutral-900
     duration-300
     hover:bg-neutral-300
+    focus:bg-neutral-300
+    focus:outline-none
     motion-safe:transition-colors
     dark:border-neutral-900
     dark:bg-neutral-950
     dark:text-neutral-200
-    dark:hover:bg-neutral-900;
+    dark:hover:bg-neutral-900
+    dark:focus:bg-neutral-900;
 }

apps/site/components/Common/Searchbox/ChatInput/index.tsx

@@ -6,6 +6,7 @@ import { PromptTextArea, Suggestions } from '@orama/ui/components';
 import { useChat } from '@orama/ui/hooks';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
+import { useEffect, useRef } from 'react';
 
 import styles from './index.module.css';
 
@@ -14,6 +15,7 @@ export const ChatInput: FC = () => {
   const {
     context: { interactions },
   } = useChat();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const suggestions = [
     t('components.search.suggestionOne'),
@@ -23,6 +25,12 @@ export const ChatInput: FC = () => {
 
   const hasInteractions = !!interactions?.length;
 
+  useEffect(() => {
+    setTimeout(() => {
+      textareaRef.current?.focus();
+    }, 100);
+  }, []);
+
   return (
     <>
       {!hasInteractions && (
@@ -40,12 +48,13 @@ export const ChatInput: FC = () => {
       <div className={styles.textareaContainer}>
         <PromptTextArea.Wrapper className={styles.textareaWrapper}>
           <PromptTextArea.Field
-            id="chat-input"
+            id="orama-chat-input"
             name="chat-input"
             placeholder={t('components.search.chatPlaceholder')}
             rows={1}
             maxLength={500}
             autoFocus
+            ref={textareaRef}
             className={styles.textareaField}
           />
           <PromptTextArea.Button

apps/site/components/Common/Searchbox/ChatInteractions/index.module.css

@@ -50,11 +50,13 @@
     p-2
     text-neutral-900
     duration-300
+    focus:bg-neutral-300
     focus:outline-none
     motion-safe:transition-colors
     lg:bottom-28
     dark:bg-neutral-900
-    dark:text-neutral-200;
+    dark:text-neutral-200
+    focus:dark:bg-neutral-800;
 
   svg {
     @apply size-4;

apps/site/components/Common/Searchbox/ChatSources/index.module.css

@@ -34,6 +34,7 @@
     duration-300
     hover:bg-neutral-200
     focus:bg-neutral-200
+    focus:outline-none
     motion-safe:transition-colors
     dark:bg-neutral-950
     dark:text-neutral-200

apps/site/components/Common/Searchbox/Search/index.module.css

@@ -105,7 +105,7 @@
     text-xs
     font-semibold
     uppercase
-    text-neutral-700
+    text-neutral-800
     dark:text-neutral-500;
 }
 
@@ -161,7 +161,7 @@
     justify-center
     pt-10
     text-sm
-    text-neutral-700
+    text-neutral-800
     dark:text-neutral-500;
 }
 
@@ -170,7 +170,7 @@
     overflow-x-auto;
 
   &::-webkit-scrollbar {
-    display: none;
+    @apply hidden;
   }
 }
 
@@ -204,11 +204,14 @@
     items-center
     gap-2
     overflow-x-auto;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
 }
 
 .facetTabItemCount {
-  @apply text-neutral-700
-    dark:text-neutral-700;
+  @apply text-neutral-700;
 }
 
 .searchResultsGroupWrapper {

apps/site/components/Common/Searchbox/Search/index.tsx

@@ -13,24 +13,28 @@ import { useSearch } from '@orama/ui/hooks/useSearch';
 import classNames from 'classnames';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 
 import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
 
 import styles from './index.module.css';
 import { getFormattedPath } from './utils';
-import { DocumentLink, type Document } from '../DocumentLink';
+import { DocumentLink } from '../DocumentLink';
+import type { Document } from '../DocumentLink';
+import { Footer } from '../Footer';
 
 type SearchProps = PropsWithChildren<{
   onChatTrigger: () => void;
+  mode?: 'search' | 'chat';
 }>;
 
-export const Search: FC<SearchProps> = ({ onChatTrigger }) => {
+export const Search: FC<SearchProps> = ({ onChatTrigger, mode = 'search' }) => {
   const t = useTranslations();
   const {
     dispatch,
     context: { searchTerm, selectedFacet },
   } = useSearch();
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const clearAll = useCallback(() => {
     dispatch({ type: 'SET_SEARCH_TERM', payload: { searchTerm: '' } });
@@ -45,12 +49,28 @@ export const Search: FC<SearchProps> = ({ onChatTrigger }) => {
     };
   }, [clearAll]);
 
+  useEffect(() => {
+    const interactiveElements = containerRef.current?.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (mode === 'search') {
+      interactiveElements?.forEach(el => {
+        el.removeAttribute('tabindex');
+      });
+    } else {
+      interactiveElements?.forEach(el => {
+        el.setAttribute('tabindex', '-1');
+      });
+    }
+  }, [mode]);
+
   return (
-    <div className={styles.searchContainer}>
+    <div className={styles.searchContainer} ref={containerRef}>
       <SearchInput.Wrapper className={styles.searchInputWrapper}>
         <MagnifyingGlassIcon />
         <SearchInput.Input
-          inputId="doc-search"
+          inputId="orama-doc-search"
           ariaLabel={t('components.search.searchPlaceholder')}
           placeholder={t('components.search.searchPlaceholder')}
           className={styles.searchInput}
@@ -232,6 +252,7 @@ export const Search: FC<SearchProps> = ({ onChatTrigger }) => {
           </SearchResults.Wrapper>
         </div>
       </div>
+      <Footer />
     </div>
   );
 };

apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css

@@ -11,6 +11,7 @@
     text-neutral-700
     duration-300
     hover:bg-white/20
+    focus:bg-white/20
     focus:outline-none
     motion-safe:transition-colors
     dark:text-white;

apps/site/components/Common/Searchbox/index.tsx

@@ -134,30 +134,37 @@ const InnerSearchBox: FC<PropsWithChildren<{ onClose: () => void }>> = ({
         />
       )}
       {displaySearch && (
-        <Search
-          onChatTrigger={() => {
-            setAutoTriggerValue(searchTerm ?? null);
-            handleSelectMode('chat');
-          }}
-        />
+        <>
+          <Search
+            mode={mode}
+            onChatTrigger={() => {
+              setAutoTriggerValue(searchTerm ?? null);
+              handleSelectMode('chat');
+            }}
+          />
+        </>
       )}
       {isMobileScreen && mode === 'chat' && (
-        <div className={styles.mobileChatContainer}>
-          <div className={styles.mobileChatTop}>
-            <ChatInteractionsContainer />
+        <>
+          <div className={styles.mobileChatContainer}>
+            <div className={styles.mobileChatTop}>
+              <ChatInteractionsContainer />
+            </div>
+            <div className={styles.mobileChatBottom}>
+              <ChatInput />
+            </div>
           </div>
-          <div className={styles.mobileChatBottom}>
-            <ChatInput />
-          </div>
-        </div>
+          <Footer />
+        </>
       )}
-      <Footer />
-      {!isMobileScreen && (
+      {!isMobileScreen && mode === 'chat' && (
         <SlidingChatPanel
           open={isChatOpen}
           onClose={() => {
             setIsChatOpen(false);
             setMode('search');
+            const searchInput = document.getElementById('orama-doc-search');
+            searchInput?.focus();
             dispatch({ type: 'CLEAR_INTERACTIONS' });
             dispatch({ type: 'CLEAR_USER_PROMPT' });
           }}
@@ -210,8 +217,8 @@ const SearchWithModal: FC = () => {
       <Modal.Wrapper
         open={open}
         onModalClosed={() => setOpen(false)}
-        closeOnOutsideClick={true}
-        closeOnEscape={true}
+        closeOnOutsideClick
+        closeOnEscape
         className={styles.modalWrapper}
       >
         <Modal.Inner className={styles.modalInner}>