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

Change the times in the aria-label of navigation items 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
kaltura · Jan 6, 2025 · 4c35596 · 4c35596
1 parent 837bdd8
commit 4c35596
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/cypress/e2e/navigation.cy.ts b/cypress/e2e/navigation.cy.ts
@@ -77,7 +77,7 @@ describe('Navigation plugin', () => {
       loadPlayer({expandOnFirstPlay: true}, {muted: true, autoplay: true}).then(() => {
         cy.get('[data-testid="navigation_root"]').should('have.css', 'visibility', 'visible');
         cy.get('[data-testid="navigation_root"]').within(() => {
-          const chapterItem = cy.get('[aria-label="00:20 chapter 2 Jump to this point in video"]').should('have.attr', 'aria-current', 'false');
+          const chapterItem = cy.get('[aria-label="Timestamp 20 seconds chapter 2 Jump to this point in video"]').should('have.attr', 'aria-current', 'false');
           chapterItem.click({force: true});
           chapterItem.should('have.attr', 'aria-current', 'true');
         });
@@ -89,9 +89,9 @@ describe('Navigation plugin', () => {
       loadPlayer({expandOnFirstPlay: true}, {muted: true, autoplay: true}).then(kalturaPlayer => {
         cy.get('[data-testid="navigation_root"]').should('have.css', 'visibility', 'visible');
         cy.get('[data-testid="navigation_root"]').within(() => {
-          cy.get('[aria-label="00:12 Hotspot 1 Jump to this point in video"]').should('have.attr', 'aria-current', 'false');
+          cy.get('[aria-label="Timestamp 12 seconds Hotspot 1 Jump to this point in video"]').should('have.attr', 'aria-current', 'false');
           kalturaPlayer.currentTime = 12;
-          cy.get('[aria-label="00:12 Hotspot 1 Jump to this point in video"]').should('have.attr', 'aria-current', 'true');
+          cy.get('[aria-label="Timestamp 12 seconds Hotspot 1 Jump to this point in video"]').should('have.attr', 'aria-current', 'true');
         });
       });
     });
@@ -141,7 +141,7 @@ describe('Navigation plugin', () => {
         cy.get('[data-testid="navigation_root"]').within(() => {
           const searchInput = cy.get("[aria-label='Search in video']");
           searchInput.type('Dark');
-          cy.get("[aria-label='00:19 Dark Side. Jump to this point in video']").should('not.contain.text', '<i>');
+          cy.get("[aria-label='Timestamp 19 seconds Dark Side. Jump to this point in video']").should('not.contain.text', '<i>');
         });
       });
     });
@@ -508,7 +508,7 @@ describe('Navigation plugin', () => {
             ]
           })
         );
-        cy.get('[aria-label="00:10 Quiz cue Jump to this point in video"]')
+        cy.get('[aria-label="Timestamp 10 seconds Quiz cue Jump to this point in video"]')
           .click({force: true})
           .then(() => {
             expect(onClick).to.have.been.calledOnce;

diff --git a/src/components/navigation/navigation-item/NavigationItem.tsx b/src/components/navigation/navigation-item/NavigationItem.tsx
@@ -7,8 +7,11 @@ import {NavigationEvent} from '../../../events/events';
 import {ui} from '@playkit-js/kaltura-player-js';
 const {preacti18n} = ui;
 
+//@ts-ignore
+const {getDurationAsText} = KalturaPlayer.ui.utils;
 const {ExpandableText} = ui.components;
 const {withText, Text, Localizer} = preacti18n;
+const {withPlayer} = KalturaPlayer.ui.components;
 
 export interface NavigationItemProps {
   data: ItemData;
@@ -23,6 +26,8 @@ export interface NavigationItemProps {
   slideNumber?: number;
   slideAltText?: string;
   instructionLabel?: string;
+  timeLabel?: string;
+  player?: any;
 }
 
 export interface NavigationItemState {
@@ -33,7 +38,10 @@ export interface NavigationItemState {
 const translates={
   slideAltText: <Text id="navigation.slide_type.one">Slide</Text>,
   instructionLabel: <Text id="navigation.instruction_label">Jump to this point in video</Text>,
+  timeLabel: <Text id="navigation.time_label">Timestamp</Text>,
+
 };
+@withPlayer
 @withText(translates)
 export class NavigationItem extends Component<NavigationItemProps, NavigationItemState> {
   private _itemElementRef: HTMLDivElement | null = null;
@@ -190,14 +198,15 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
   };
 
   render() {
-    const {data, selectedItem, showIcon, instructionLabel} = this.props;
-    const {id, previewImage, itemType, displayTime, liveCuePoint, groupData, displayTitle, displayDescription} = data;
+    const {data, selectedItem, showIcon, instructionLabel, timeLabel, player} = this.props;
+    const {id, previewImage, itemType, displayTime, liveCuePoint, groupData, displayTitle, displayDescription, startTime} = data;
     const {imageLoaded} = this.state;
     const ariaLabelTitle: string = (typeof displayTitle === 'string' && displayTitle ? displayTitle : displayDescription) || '';
+    const timestampLabel = `${timeLabel} ${getDurationAsText(Math.floor(startTime), player?.config.ui.locale, true)}`
 
     const a11yProps: Record<string, any> = {
       ['aria-current']: selectedItem,
-      ['aria-label']: displayTime + " " + ariaLabelTitle + " " + instructionLabel,
+      ['aria-label']: timestampLabel + " " + ariaLabelTitle + " " + instructionLabel,
       tabIndex: 0,
       role: 'button'
     };

diff --git a/translations/en.i18n.json b/translations/en.i18n.json
@@ -59,7 +59,8 @@
       "search_description": "You can search the video captions for specific words or phrases.",
       "read_more": "Read more",
       "read_less": "Read less",
-      "instruction_label": "Jump to this point in video"
+      "instruction_label": "Jump to this point in video",
+      "time_label": "Timestamp"
     }
   }
 }