[Accessibility Audit] Announce via screen reader when no results for search docs (#55551)

Author: ashishkeshan

data/ui.yml

@@ -42,6 +42,7 @@ search:
     clear_search_query: Clear
     view_all_search_results: View more results
     no_results_found: No results found
+    no_results_found_announcement: 'Search Docs: No results found'
     search_docs_with_query: Search docs for "{{query}}"
     privacy_disclaimer: For product and service improvement purposes, the GitHub Docs team will retain questions and answers generated in the Docs search function. Please see the <a href="https://docs.github.com/privacy"><u>GitHub Privacy Statement</u></a> to review how GitHub collects and uses your data.
   ai:

src/fixtures/fixtures/data/ui.yml

@@ -42,6 +42,7 @@ search:
     clear_search_query: Clear
     view_all_search_results: View more results
     no_results_found: No results found
+    no_results_found_announcement: 'Search Docs: No results found'
     search_docs_with_query: Search docs for "{{query}}"
     privacy_disclaimer: For product and service improvement purposes, the GitHub Docs team will retain questions and answers generated in the Docs search function. Please see the <a href="https://docs.github.com/privacy"><u>GitHub Privacy Statement</u></a> to review how GitHub collects and uses your data.
   ai:

src/search/components/input/SearchOverlay.tsx

@@ -91,6 +91,7 @@ export function SearchOverlay({
   const [aiCouldNotAnswer, setAICouldNotAnswer] = useState<boolean>(false)
   const [showSpinner, setShowSpinner] = useState(false)
   const [scrollPos, setScrollPos] = useState(0)
+  const [announcement, setAnnouncement] = useState<string>('')
 
   const { hasOpenHeaderNotifications } = useSharedUIContext()
 
@@ -188,6 +189,7 @@ export function SearchOverlay({
 
   // Combine options for key navigation
   const [combinedOptions, generalOptionsWithViewStatus, aiOptionsWithUserInput] = useMemo(() => {
+    setAnnouncement('')
     let generalOptionsWithViewStatus = [...generalSearchResults]
     const aiOptionsWithUserInput = [...userInputOptions, ...filteredAIOptions]
     const combinedOptions = [] as Array<{
@@ -209,6 +211,7 @@ export function SearchOverlay({
         } as unknown as GeneralSearchHit)
       }
     } else if (urlSearchInputQuery.trim() !== '' && !searchLoading) {
+      setAnnouncement(t('search.overlay.no_results_found_announcement'))
       generalOptionsWithViewStatus.push({
         title: t('search.overlay.no_results_found'),
         isNoResultsFound: true,
@@ -815,6 +818,22 @@ export function SearchOverlay({
             dangerouslySetInnerHTML={{ __html: t('search.overlay.privacy_disclaimer') }}
           />
         </footer>
+        <div
+          aria-live="assertive"
+          style={{
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: '0',
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            border: '0',
+          }}
+        >
+          {announcement}
+        </div>
       </Overlay>
     </>
   )