fix remaining a11y issues (#55930)

Author: Ebonsignori

src/search/components/input/AskAIResults.tsx

@@ -373,7 +373,7 @@ export function AskAIResults({
   }, [query])
 
   return (
-    <div className={styles.container}>
+    <div id="ask-ai-result-container" role="region" className={styles.container}>
       {!aiCouldNotAnswer && references && references.length > 0 ? (
         <>
           <ActionList className={styles.referencesList} showDividers>
@@ -398,7 +398,6 @@ export function AskAIResults({
                       }}
                       key={`reference-${index}`}
                       id={`search-option-reference-${index + referencesIndexOffset}`}
-                      role="option"
                       tabIndex={-1}
                       onSelect={() => {
                         referenceOnSelect(source.url)

src/search/components/input/SearchOverlay.tsx

@@ -601,29 +601,33 @@ export function SearchOverlay({
           {aiSearchError && (
             <>
               <ActionList.Divider key="error-top-divider" />
-              <ActionList.GroupHeading
-                as="h3"
-                tabIndex={-1}
-                aria-label={t('search.overlay.ai_suggestions_list_aria_label')}
-              >
-                <CopilotIcon className="mr-1" />
-                {t('search.overlay.ai_autocomplete_list_heading')}
-              </ActionList.GroupHeading>
-              <Box
-                sx={{
-                  padding: '0 16px 0 16px',
-                }}
-              >
-                <Banner
-                  tabIndex={0}
-                  className={styles.errorBanner}
-                  title={t('search.failure.ai_title')}
-                  description={t('search.failure.description')}
-                  variant="info"
-                  aria-live="assertive"
-                  role="alert"
-                />
-              </Box>
+              <li tabIndex={-1}>
+                <ActionList.GroupHeading
+                  as="h3"
+                  tabIndex={-1}
+                  aria-label={t('search.overlay.ai_suggestions_list_aria_label')}
+                >
+                  <CopilotIcon className="mr-1" />
+                  {t('search.overlay.ai_autocomplete_list_heading')}
+                </ActionList.GroupHeading>
+              </li>
+              <li>
+                <Box
+                  sx={{
+                    padding: '0 16px 0 16px',
+                  }}
+                >
+                  <Banner
+                    tabIndex={0}
+                    className={styles.errorBanner}
+                    title={t('search.failure.ai_title')}
+                    description={t('search.failure.description')}
+                    variant="info"
+                    aria-live="assertive"
+                    role="alert"
+                  />
+                </Box>
+              </li>
               <ActionList.Divider key="error-bottom-divider" />
             </>
           )}
@@ -721,7 +725,8 @@ export function SearchOverlay({
             leadingVisual={<SearchIcon />}
             aria-labelledby={overlayHeadingId}
             role="combobox"
-            aria-controls="search-suggestions-list"
+            // In AskAI the search input not longer "controls" the suggestions list, because there is no list, so we remove the aria-controls attribute
+            aria-controls={isAskAIState ? 'ask-ai-result-container' : 'search-suggestions-list'}
             aria-expanded={combinedOptions.length > 0}
             aria-activedescendant={
               selectedIndex >= 0
@@ -883,21 +888,23 @@ function renderSearchGroups(
   if (isInAskAIState) {
     groups.push(
       <ActionList.Group key="ai" data-testid="ask-ai">
-        <AskAIResults
-          query={askAIState.aiQuery}
-          debug={askAIState.debug}
-          version={askAIState.currentVersion}
-          setAISearchError={askAIState.setAISearchError}
-          references={askAIState.references}
-          setReferences={askAIState.setReferences}
-          referencesIndexOffset={askAIState.referencesIndexOffset}
-          referenceOnSelect={askAIState.referenceOnSelect}
-          selectedIndex={selectedIndex}
-          askAIEventGroupId={askAIState.askAIEventGroupId}
-          aiCouldNotAnswer={askAIState.aiCouldNotAnswer}
-          setAICouldNotAnswer={askAIState.setAICouldNotAnswer}
-          listElementsRef={listElementsRef}
-        />
+        <li tabIndex={-1}>
+          <AskAIResults
+            query={askAIState.aiQuery}
+            debug={askAIState.debug}
+            version={askAIState.currentVersion}
+            setAISearchError={askAIState.setAISearchError}
+            references={askAIState.references}
+            setReferences={askAIState.setReferences}
+            referencesIndexOffset={askAIState.referencesIndexOffset}
+            referenceOnSelect={askAIState.referenceOnSelect}
+            selectedIndex={selectedIndex}
+            askAIEventGroupId={askAIState.askAIEventGroupId}
+            aiCouldNotAnswer={askAIState.aiCouldNotAnswer}
+            setAICouldNotAnswer={askAIState.setAICouldNotAnswer}
+            listElementsRef={listElementsRef}
+          />
+        </li>
       </ActionList.Group>,
     )
   }
@@ -935,7 +942,6 @@ function renderSearchGroups(
           <ActionList.Item
             key={`general-${index}`}
             id={`search-option-general-${index}`}
-            role="option"
             className={styles.noResultsFound}
             tabIndex={-1}
             aria-label={t('search.overlay.no_results_found')}
@@ -953,7 +959,6 @@ function renderSearchGroups(
           <ActionList.Item
             key={`general-${index}`}
             id={`search-option-general-${index}`}
-            role="option"
             tabIndex={-1}
             active={isActive}
             onSelect={() => performGeneralSearch()}
@@ -986,7 +991,6 @@ function renderSearchGroups(
           <ActionList.Item
             key={`general-${index}`}
             id={`search-option-general-${index}`}
-            role="option"
             aria-describedby="search-suggestions-list"
             onSelect={() =>
               option.isViewAllResults ? performGeneralSearch() : generalSearchResultOnSelect(option)
@@ -1062,7 +1066,6 @@ function renderSearchGroups(
             <ActionList.Item
               key={`ai-${indexWithOffset}`}
               id={`search-option-ai-${indexWithOffset}`}
-              role="option"
               aria-describedby="copilot-suggestions"
               onSelect={() => aiAutocompleteOnSelect(option)}
               active={isActive}