Add aria-live region for transcript search results (#1292)

hypothesis · Feb 8, 2024 · 7a0c280 · 7a0c280
1 parent 81fea2d
commit 7a0c280
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git 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
@@ -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);
+    });
+  });
 });