[Accessibility Audit] Copilot Search scroll on focus (#55412)

Co-authored-by: Copilot <[email protected]>

Author: ashishkeshan

src/search/components/input/AskAIResults.tsx

@@ -30,6 +30,7 @@ type AIQueryResultsProps = {
   askAIEventGroupId: React.MutableRefObject<string>
   aiCouldNotAnswer: boolean
   setAICouldNotAnswer: (aiCouldNotAnswer: boolean) => void
+  listElementsRef: React.RefObject<Array<HTMLLIElement | null>>
 }
 
 type AISearchResultEventParams = {
@@ -56,6 +57,7 @@ export function AskAIResults({
   askAIEventGroupId,
   aiCouldNotAnswer,
   setAICouldNotAnswer,
+  listElementsRef,
 }: AIQueryResultsProps) {
   const router = useRouter()
   const { t } = useTranslation('search')
@@ -396,6 +398,7 @@ export function AskAIResults({
                   if (index >= MAX_REFERENCES_TO_SHOW) {
                     return null
                   }
+                  const refIndex = index + referencesIndexOffset
                   return (
                     <ActionList.Item
                       sx={{
@@ -408,7 +411,12 @@ export function AskAIResults({
                       onSelect={() => {
                         referenceOnSelect(source.url)
                       }}
-                      active={index + referencesIndexOffset === selectedIndex}
+                      active={refIndex === selectedIndex}
+                      ref={(element) => {
+                        if (listElementsRef.current) {
+                          listElementsRef.current[refIndex] = element
+                        }
+                      }}
                     >
                       <ActionList.LeadingVisual aria-hidden="true">
                         <FileIcon />

src/search/components/input/SearchOverlay.tsx

@@ -417,15 +417,16 @@ export function SearchOverlay({
 
   // Handle keyboard navigation of suggestions
   const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    let optionsLength = listElementsRef.current?.length ?? 0
     if (event.key === 'ArrowDown') {
       event.preventDefault()
-      if (combinedOptions.length > 0) {
+      if (optionsLength > 0) {
         let newIndex = 0
         // If no item is selected, select the first item
         if (selectedIndex === -1) {
           newIndex = 0
         } else {
-          newIndex = (selectedIndex + 1) % combinedOptions.length
+          newIndex = (selectedIndex + 1) % optionsLength
           // If we go "out of bounds" (i.e. the index is less than the selected index), unselect the item
           if (newIndex < selectedIndex) {
             newIndex = -1
@@ -439,17 +440,23 @@ export function SearchOverlay({
           newIndex += 1
         }
         setSelectedIndex(newIndex)
+        if (newIndex !== -1 && listElementsRef.current[newIndex]) {
+          listElementsRef.current[newIndex]?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          })
+        }
       }
     } else if (event.key === 'ArrowUp') {
       event.preventDefault()
-      if (combinedOptions.length > 0) {
+      if (optionsLength > 0) {
         let newIndex = 0
         // If no item is selected, select the last item
         if (selectedIndex === -1) {
-          newIndex = combinedOptions.length - 1
+          newIndex = optionsLength - 1
         } else {
           // Otherwise, select the previous item
-          newIndex = (selectedIndex - 1 + combinedOptions.length) % combinedOptions.length
+          newIndex = (selectedIndex - 1 + optionsLength) % optionsLength
           // If we go "out of bounds" (i.e. the index is greater than the selected index), unselect the item
           if (newIndex > selectedIndex) {
             newIndex = -1
@@ -464,6 +471,12 @@ export function SearchOverlay({
           newIndex -= 1
         }
         setSelectedIndex(newIndex)
+        if (newIndex !== -1 && listElementsRef.current[newIndex]) {
+          listElementsRef.current[newIndex]?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          })
+        }
       }
     } else if (event.key === 'Enter') {
       event.preventDefault()
@@ -877,6 +890,7 @@ function renderSearchGroups(
           askAIEventGroupId={askAIState.askAIEventGroupId}
           aiCouldNotAnswer={askAIState.aiCouldNotAnswer}
           setAICouldNotAnswer={askAIState.setAICouldNotAnswer}
+          listElementsRef={listElementsRef}
         />
       </ActionList.Group>,
     )