fix(ADA-1988): Change time to be read as text (#231)

Change the times in the caption aria-label to be read as a text with hours/minutes/seconds.
Using the duration-humanizer implementation was added here - kaltura/playkit-js-ui#955

Solves ADA-1988

cypress/e2e/transcript.cy.ts

@@ -162,7 +162,7 @@ describe('Transcript plugin', () => {
           keyCode: 9, // tab
           force: true
         });
-        cy.get('[aria-label="00:15 listening to music for the first time"]').should('have.focus');
+        cy.get('[aria-label="Timestamp 15 seconds listening to music for the first time"]').should('have.focus');
       });
     });
 

src/components/caption/caption.tsx

@@ -6,6 +6,8 @@ import * as styles from './caption.scss';
 
 import {TranscriptEvents} from '../../events/events';
 
+//@ts-ignore
+const {getDurationAsText} = KalturaPlayer.ui.utils
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {withEventManager} = KalturaPlayer.ui.Event;
 const {withPlayer} = KalturaPlayer.ui.components;
@@ -20,7 +22,8 @@ export interface CaptionProps {
   player?: any;
   captionLabel?: string;
   moveToSearch?: string;
-  navigationInstruction?: string
+  navigationInstruction?: string;
+  timeLabel?: string;
   setTextToRead: (textToRead: string, delay?: number) => void;
 }
 
@@ -39,7 +42,9 @@ interface ExtendedCaptionProps extends CaptionProps {
 const translates = {
   captionLabel: <Text id="transcript.caption_label">Jump to this point in video</Text>,
   moveToSearch: <Text id="transcript.move_to_search">Click to jump to search result</Text>,
-  navigationInstruction: <Text id="transcript.navigation_instruction">Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript.</Text>
+  navigationInstruction: <Text id="transcript.navigation_instruction">Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript.</Text>,
+  timeLabel: <Text id="transcript.time_label">Timestamp</Text>,
+
 };
 
 @withText(translates)
@@ -145,15 +150,15 @@ export class Caption extends Component<ExtendedCaptionProps> {
   };
 
   render() {
-    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction} = this.props;
+    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction, timeLabel, player} = this.props;
     const {startTime, id} = caption;
     const isHighlighted = Object.keys(highlighted).some(c => c === id);
     const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
 
     const captionA11yProps: Record<string, any> = {
       ariaCurrent: isHighlighted,
       tabIndex: 0,
-      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text} ${indexMap ? moveToSearch : captionLabel}. ${navigationInstruction}`,
+      ariaLabel: `${showTime? `${timeLabel} ${getDurationAsText(Math.floor(startTime), player?.config.ui.locale, true)} ` : ''}${caption.text} ${indexMap ? moveToSearch : captionLabel}. ${navigationInstruction}`,
       role: 'button'
     };
 

translations/en.i18n.json

@@ -26,7 +26,8 @@
       "move_to_search": "Click to jump to search result",
       "to_search_result": "Go to result",
       "to_search_result_label": "Click to jump to this point in the video",
-      "navigation_instruction": "Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript."
+      "navigation_instruction": "Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript.",
+      "time_label": "Timestamp"
     }
   }
 }