From 50b94d55bec0cb2173196d5f6b1541ca4d347857 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Wed, 23 Aug 2023 13:43:21 +0200
Subject: [PATCH 1/2] Remove timeout for search result screen reader text

MIMIR-1593
---
 .../site/parts/searchResult/searchResultView.jsx       | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/main/resources/site/parts/searchResult/searchResultView.jsx b/src/main/resources/site/parts/searchResult/searchResultView.jsx
index f9b2258f6..5cac12172 100644
--- a/src/main/resources/site/parts/searchResult/searchResultView.jsx
+++ b/src/main/resources/site/parts/searchResult/searchResultView.jsx
@@ -37,7 +37,6 @@ function SearchResult(props) {
     mainSubject: props.subjectUrlParam || '',
     contentType: props.contentTypeUrlParam || '',
   })
-  const [searchResultSRText, setSearchResultSRText] = useState(props.searchResultSRText)
   const allContentTypeItem = {
     id: 'allTypes',
     title: props.allContentTypesPhrase,
@@ -74,11 +73,6 @@ function SearchResult(props) {
     if (searchTerm && inputSearchElement.current) {
       inputSearchElement.current.firstChild.focus()
     }
-
-    const timeout = setTimeout(() => {
-      setSearchResultSRText((prev) => prev + '.')
-    }, 1500)
-    return () => clearTimeout(timeout)
   }, [])
 
   useEffect(() => {
@@ -614,14 +608,12 @@ function SearchResult(props) {
               ariaLabelWrapper={props.term ? props.mainSearchPhrase : undefined}
               ariaLabelSearchButton={props.searchText}
             />
+            <div className='sr-only'>{props.searchResultSRText}</div>
             {renderFilterResults()}
           </div>
         </div>
         <div className='col-12 search-result-body'>
           <div className='container mt-5'>
-            <div className='sr-only' aria-live='polite'>
-              {searchResultSRText}
-            </div>
             {hits.length > 0 || props.bestBetHit ? renderList() : renderNoHitMessage()}
             {renderLoading()}
             {renderShowMoreButton()}

From 42ecc9a72e3583592b257740c2c9c496ae79e871 Mon Sep 17 00:00:00 2001
From: johnnadeluy <johnnadel.salita@gmail.com>
Date: Thu, 24 Aug 2023 13:20:10 +0200
Subject: [PATCH 2/2] Clear search result screen reader text after 2s

MIMIR-1593
---
 .../parts/searchResult/searchResultView.jsx    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/main/resources/site/parts/searchResult/searchResultView.jsx b/src/main/resources/site/parts/searchResult/searchResultView.jsx
index 5cac12172..a2de9ed42 100644
--- a/src/main/resources/site/parts/searchResult/searchResultView.jsx
+++ b/src/main/resources/site/parts/searchResult/searchResultView.jsx
@@ -37,6 +37,7 @@ function SearchResult(props) {
     mainSubject: props.subjectUrlParam || '',
     contentType: props.contentTypeUrlParam || '',
   })
+  const [searchResultSRText, setSearchResultSRText] = useState(null)
   const allContentTypeItem = {
     id: 'allTypes',
     title: props.allContentTypesPhrase,
@@ -73,6 +74,17 @@ function SearchResult(props) {
     if (searchTerm && inputSearchElement.current) {
       inputSearchElement.current.firstChild.focus()
     }
+
+    const announceSearchResultScreenReader = setTimeout(() => {
+      setSearchResultSRText(props.searchResultSRText)
+    }, 1500)
+    const clearSearchResulScreenReaderText = setTimeout(() => {
+      setSearchResultSRText(null)
+    }, 2000)
+    return () => {
+      clearTimeout(announceSearchResultScreenReader)
+      clearTimeout(clearSearchResulScreenReaderText)
+    }
   }, [])
 
   useEffect(() => {
@@ -608,12 +620,16 @@ function SearchResult(props) {
               ariaLabelWrapper={props.term ? props.mainSearchPhrase : undefined}
               ariaLabelSearchButton={props.searchText}
             />
-            <div className='sr-only'>{props.searchResultSRText}</div>
             {renderFilterResults()}
           </div>
         </div>
         <div className='col-12 search-result-body'>
           <div className='container mt-5'>
+            {searchResultSRText && (
+              <div className='visually-hidden' aria-live='polite'>
+                {searchResultSRText}
+              </div>
+            )}
             {hits.length > 0 || props.bestBetHit ? renderList() : renderNoHitMessage()}
             {renderLoading()}
             {renderShowMoreButton()}