diff --git a/src/components/Transcript/Transcript.js b/src/components/Transcript/Transcript.js index 135914ce..80844df6 100644 --- a/src/components/Transcript/Transcript.js +++ b/src/components/Transcript/Transcript.js @@ -11,7 +11,7 @@ import { useSearchCounts } from '@Services/search'; import { useTranscripts } from '@Services/ramp-hooks'; -import { autoScroll, timeToHHmmss } from '@Services/utility-helpers'; +import { autoScroll, screenReaderFriendlyTime, timeToHHmmss } from '@Services/utility-helpers'; import Spinner from '@Components/Spinner'; import './Transcript.scss'; @@ -129,27 +129,30 @@ const TranscriptLine = memo(({ * @returns */ const handleKeyDown = (e) => { - if (e.key === 'Enter' || e.key === 'Space') { + if (e.keyCode == 13 || e.keyCode == 32) { onClick(e); } else { return; } }; + const cueText = useMemo(() => { + return buildSpeakerText(item, item.tag === TRANSCRIPT_CUE_TYPES.nonTimedLine); + }, [item?.tag]); + /** Build text portion of the transcript cue element */ const cueTextElement = useMemo(() => { - const text = buildSpeakerText(item, item.tag === TRANSCRIPT_CUE_TYPES.nonTimedLine); switch (item.tag) { case TRANSCRIPT_CUE_TYPES.note: - return showNotes ? : null; + return showNotes ? : null; case TRANSCRIPT_CUE_TYPES.timedCue: - return ; + return ; case TRANSCRIPT_CUE_TYPES.nonTimedLine: - return

; + return

; default: return null; } - }, [item, showNotes]); + }, [cueText, showNotes]); const testId = useMemo(() => { switch (item.tag) { @@ -168,8 +171,9 @@ const TranscriptLine = memo(({ return ( {item.tag === TRANSCRIPT_CUE_TYPES.timedCue && typeof item.begin === 'number' && ( @@ -287,7 +292,7 @@ const TranscriptList = memo(({ return (