UHF-10235: Added a check that the content has loaded before scrolling to results to fix issue on screen reader and safari

src/js/react/apps/job-search/containers/ResultsContainer.tsx

@@ -25,16 +25,17 @@ const ResultsContainer = () => {
   const scrollTarget = createRef<HTMLDivElement>();
   const { query, promoted, handleResults } = useResultsQuery(urlParams);
 
-  // Scroll to results when they change.
-  const choices = Boolean(Object.keys(urlParams).length);
-  useScrollToResults(scrollTarget, choices);
-
   const { data, error, isLoading, isValidating } = useIndexQuery({
     keepPreviousData: true,
     query,
     multi: promoted
   });
 
+  // Scroll to results when they change.
+  const choices = Boolean(Object.keys(urlParams).length);
+  const shouldScrollOnRender = Boolean(choices && !isLoading && !isValidating);
+  useScrollToResults(scrollTarget, shouldScrollOnRender);
+
   const updatePage = (e: SyntheticEvent<HTMLButtonElement>, index: number) => {
     e.preventDefault();
     setPage(index.toString());

src/js/react/common/hooks/useScrollToResults.ts

@@ -6,8 +6,8 @@ const useScrollToResults = (ref: RefObject<HTMLElement>, shouldScrollOnRender: b
 
     if (current && shouldScrollOnRender) {
       current.setAttribute('tabindex', '-1');
-      current.focus({preventScroll: true});
-      current.scrollIntoView({behavior: 'smooth', block: 'center'});
+      current.focus({ preventScroll: true });
+      current.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
   }, [ref, shouldScrollOnRender]);
 };