From 7a0c2806333bd535f0adb77c29b3b44eeb62128a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Thu, 8 Feb 2024 12:39:48 +0100
Subject: [PATCH] Add aria-live region for transcript search results (#1292)

---
 .../scripts/video_player/components/Transcript.tsx  | 12 ++++++++++++
 .../video_player/components/test/Transcript-test.js | 13 +++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/via/static/scripts/video_player/components/Transcript.tsx b/via/static/scripts/video_player/components/Transcript.tsx
index 83f03acd..4c6a6fd1 100644
--- a/via/static/scripts/video_player/components/Transcript.tsx
+++ b/via/static/scripts/video_player/components/Transcript.tsx
@@ -422,6 +422,18 @@ export default function Transcript({
           {segments}
           {children}
         </div>
+        <div
+          className="sr-only"
+          aria-live="polite"
+          role="status"
+          data-testid="search-status"
+        >
+          {filterMatches && filter && (
+            <>
+              {filter} returned {filterMatches.size} results
+            </>
+          )}
+        </div>
       </Scroll>
     </ScrollContainer>
   );
diff --git a/via/static/scripts/video_player/components/test/Transcript-test.js b/via/static/scripts/video_player/components/test/Transcript-test.js
index 8fa0b54b..b0ffb609 100644
--- a/via/static/scripts/video_player/components/test/Transcript-test.js
+++ b/via/static/scripts/video_player/components/test/Transcript-test.js
@@ -349,4 +349,17 @@ describe('Transcript', () => {
     assert.calledOnce(fakeTextHighlighter.removeHighlights);
     assert.calledWith(fakeTextHighlighter.removeHighlights, element);
   });
+
+  [
+    { filter: 'video', expectedStatus: 'video returned 1 results' },
+    { filter: 'to', expectedStatus: 'to returned 2 results' },
+    { filter: 'no match', expectedStatus: 'no match returned 0 results' },
+  ].forEach(({ filter, expectedStatus }) => {
+    it('shows search status with amount of matching results', () => {
+      const wrapper = createTranscript({ filter });
+      const status = wrapper.find('[data-testid="search-status"]');
+
+      assert.equal(status.text(), expectedStatus);
+    });
+  });
 });