chore(global-search): seperate tab and arrow navigation

Author: elmarburke

plugins/global-search/src/components/GroupHeader.tsx

@@ -30,6 +30,7 @@ export const GroupHeader = memo(
 
         return (
             <button
+                tabIndex={-1}
                 ref={ref}
                 onClick={onToggle}
                 className={cn(

plugins/global-search/src/components/Match.tsx

@@ -49,6 +49,7 @@ export const Match = forwardRef<HTMLButtonElement, MatchProps>(function Match(pr
     return (
         <button
             ref={ref}
+            tabIndex={-1}
             onClick={navigateToResult}
             className={cn(
                 "text-secondary-light dark:text-secondary-dark text-xs w-full text-left select-none cursor-pointer pl-5 rounded-lg transition-colors h-6 left-0",

plugins/global-search/src/components/Results.tsx

@@ -53,7 +53,7 @@ export function ResultsList({ groups }: ResultsProps) {
     return (
         <div
             ref={scrollElementRef}
-            className="flex-1 min-h-0 overflow-auto scrollbar-hidden contain-strict"
+            className="flex-1 min-h-0 overflow-auto scrollbar-hidden contain-strict focus-visible:outline-focus-ring-light focus-visible:dark:outline-focus-ring-dark focus-visible:outline-2 rounded-lg"
             role="listbox"
             aria-label="Search results"
         >

plugins/global-search/src/components/SearchScene.tsx

@@ -78,7 +78,7 @@ export function SearchScene() {
                         <IconEllipsis className="text-framer-text-tertiary-light dark:text-framer-text-tertiary-dark" />
                     </Menu>
                 </div>
-                <div className="overflow-y-auto px-3 flex flex-col flex-1 scrollbar-hidden">
+                <div className="px-3 flex flex-col flex-1 scrollbar-hidden">
                     {queryToUse && hasResults && <ResultsList groups={results} />}
                     {noResultsState === "searching" && <ResultMessage>Searching…</ResultMessage>}
                     {noResultsState === "no-results" && <ResultMessage>No Results</ResultMessage>}

plugins/global-search/src/components/ui/Menu.tsx

@@ -42,7 +42,7 @@ export const Menu = memo(function Menu({ items, children, className }: MenuProps
                 ref={buttonRef}
                 onMouseDown={toggleMenu}
                 onKeyDown={toggleMenu}
-                className="group h-full -mx-2 px-2 -my-3 py-3 text-white rounded-md flex-shrink-0 flex items-center justify-center bg-transparent focus:outline-none hover:text-primary-light dark:hover:text-primary-dark focus:text-primary-light dark:focus:text-primary-dark disabled:opacity-50 disabled:pointer-events-none disabled:cursor-default visible"
+                className="group h-full -mx-2 px-2 -my-3 py-3 text-white rounded-md flex-shrink-0 flex items-center justify-center bg-transparent outline-focus-ring-light dark:outline-focus-ring-dark hover:text-primary-light dark:hover:text-primary-dark focus:text-primary-light dark:focus:text-primary-dark disabled:opacity-50 disabled:pointer-events-none disabled:cursor-default visible"
                 aria-haspopup="true"
             >
                 <div className="flex items-center justify-center w-fit h-fit flex-shrink-0 bg-transparent text-tertiary-light dark:text-tertiary-dark group-hover:text-primary-light dark:group-hover:text-primary-dark group-focus:text-primary-light dark:group-focus:text-primary-dark">

plugins/global-search/src/styles.css

@@ -28,6 +28,9 @@
     --color-modal-light: #ffffff;
     --color-modal-dark: #111111;
 
+    --color-focus-ring-light: #0099ff;
+    --color-focus-ring-dark: #0099ff;
+
     /* Spacing */
     --spacing: 5px;
 }