From 0bc801a257603c911460b700df60f32fe6a5493c Mon Sep 17 00:00:00 2001
From: Serhii Marchenko <serhii.marchenko@kaltura.com>
Date: Tue, 13 Aug 2024 10:24:04 +0300
Subject: [PATCH 1/2] fix(A11Y-58): add aria-label to timeline marker

---
 src/components/marker/timeline-marker.tsx  | 23 ++++++++++++++++------
 src/components/marker/timeline-preview.tsx |  1 +
 src/timeline-manager.tsx                   |  4 ++++
 src/types/timelineTypes.ts                 |  1 +
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/marker/timeline-marker.tsx b/src/components/marker/timeline-marker.tsx
index db49044..2bd04b7 100644
--- a/src/components/marker/timeline-marker.tsx
+++ b/src/components/marker/timeline-marker.tsx
@@ -4,14 +4,24 @@ import * as styles from './timeline-marker.scss';
 import type {TimelineMarkerProps} from '../../types/timelineTypes';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {useMemo, useRef, useEffect} from 'preact/hooks';
-import {Chapter} from "../../../flow-typed/types/cue-point-option";
+import {Chapter} from '../../../flow-typed/types/cue-point-option';
 
 const {
   redux: {useSelector}
 } = KalturaPlayer.ui;
 
-export const TimelineMarker = (({isDisabled, onMarkerClick, getSeekBarNode, useQuizQuestionMarkerSize, setMarkerRef = () => {}, markerStartTime}: TimelineMarkerProps) => {
-  const segment: Chapter = useSelector((state: any) => state.seekbar.segments.find((segment: Chapter) => markerStartTime >= segment.startTime && markerStartTime < segment.endTime));
+export const TimelineMarker = ({
+  isDisabled,
+  onMarkerClick,
+  getSeekBarNode,
+  useQuizQuestionMarkerSize,
+  setMarkerRef = () => {},
+  markerStartTime,
+  type
+}: TimelineMarkerProps) => {
+  const segment: Chapter = useSelector((state: any) =>
+    state.seekbar.segments.find((segment: Chapter) => markerStartTime >= segment.startTime && markerStartTime < segment.endTime)
+  );
   const hoverActive = useSelector((state: any) => {
     return segment ? segment.isHovered : state.seekbar.hoverActive;
   });
@@ -46,12 +56,12 @@ export const TimelineMarker = (({isDisabled, onMarkerClick, getSeekBarNode, useQ
     };
 
     const onMouseOver = () => {
-      if(markerRef?.current && !useQuizQuestionMarkerSize && isSeekbarSegmented) {
+      if (markerRef?.current && !useQuizQuestionMarkerSize && isSeekbarSegmented) {
         markerRef.current.style.width = '12px';
         markerRef.current.style.height = '12px';
         markerRef.current.style.transform = 'translateY(-4px)';
       }
-    }
+    };
 
     return (
       <A11yWrapper onClick={onMarkerClick}>
@@ -62,6 +72,7 @@ export const TimelineMarker = (({isDisabled, onMarkerClick, getSeekBarNode, useQ
           onMouseOver={onMouseOver}
           tabIndex={disabled ? -1 : 0}
           data-testid="cuePointMarkerContainer"
+          aria-label={type}
           className={`${useQuizQuestionMarkerSize ? styles.quizQuestionMarkerSize : styles.smallMarker} ${hoverActive ? styles.hover : ''}`}
           style={`transform: translateY(${getTransformValue()}px)`}>
           <div className={`${styles.marker}`} />
@@ -71,4 +82,4 @@ export const TimelineMarker = (({isDisabled, onMarkerClick, getSeekBarNode, useQ
   }, [disabled, hoverActive, useQuizQuestionMarkerSize, isSeekbarSegmented]);
 
   return renderMarker;
-});
+};
diff --git a/src/components/marker/timeline-preview.tsx b/src/components/marker/timeline-preview.tsx
index cb33bc6..cc4a438 100644
--- a/src/components/marker/timeline-preview.tsx
+++ b/src/components/marker/timeline-preview.tsx
@@ -385,6 +385,7 @@ export class TimelinePreview extends Component<TimelinePreviewProps> {
         <div
           className={styles.imageContainer}
           data-testid="cuePointPreviewImageContainer"
+          // @ts-expect-error Type 'undefined' is not assignable to type 'string | number'
           style={getFramePreviewImgContainerStyle(thumbnailInfo())}
           onMouseDown={this.onThumbnailClick}
           ref={node => (this._thumbnailContainerElement = node)}>
diff --git a/src/timeline-manager.tsx b/src/timeline-manager.tsx
index 8a7a213..0508f84 100644
--- a/src/timeline-manager.tsx
+++ b/src/timeline-manager.tsx
@@ -246,6 +246,9 @@ class TimelineManager {
     const setMarkerRef = (node: HTMLDivElement | null) => {
       timelineMarkerData.timelineMarkerRef = node;
     };
+    const getTimelineMarkerType = () => {
+      return timelineMarkerData?.cuePointsData?.[0]?.type;
+    };
     // create the timeline marker comp
     const timeLineMarker: TimeLineMarker = {
       time: markerStartTime,
@@ -262,6 +265,7 @@ class TimelineManager {
               isDisabled={timelineMarkerData.isMarkerDisabled}
               setMarkerRef={setMarkerRef}
               markerStartTime={markerStartTime}
+              type={getTimelineMarkerType()}
             />
           );
         }
diff --git a/src/types/timelineTypes.ts b/src/types/timelineTypes.ts
index 804d624..a70db9e 100644
--- a/src/types/timelineTypes.ts
+++ b/src/types/timelineTypes.ts
@@ -26,6 +26,7 @@ export interface TimelineMarkerProps {
   useQuizQuestionMarkerSize: boolean;
   setMarkerRef: (node: HTMLDivElement | null) => void;
   markerStartTime: number;
+  type: string;
 }
 
 export interface TimeLineMarker {

From 404d22a84a974a462d970570b4b7d35e691371b5 Mon Sep 17 00:00:00 2001
From: Serhii Marchenko <serhii.marchenko@kaltura.com>
Date: Tue, 13 Aug 2024 10:39:11 +0300
Subject: [PATCH 2/2] fix(A11Y-58): typescript error

---
 src/components/marker/timeline-preview.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/marker/timeline-preview.tsx b/src/components/marker/timeline-preview.tsx
index cc4a438..5e756f1 100644
--- a/src/components/marker/timeline-preview.tsx
+++ b/src/components/marker/timeline-preview.tsx
@@ -44,7 +44,7 @@ interface TimelinePreviewProps {
   moveOnHover?: boolean;
 }
 
-const getFramePreviewImgContainerStyle = (thumbnailInfo: ThumbnailInfo | ThumbnailInfo[]) => {
+const getFramePreviewImgContainerStyle = (thumbnailInfo: ThumbnailInfo | ThumbnailInfo[]): Record<string, string> => {
   if (!thumbnailInfo) {
     return {
       borderColor: 'transparent'
@@ -385,7 +385,6 @@ export class TimelinePreview extends Component<TimelinePreviewProps> {
         <div
           className={styles.imageContainer}
           data-testid="cuePointPreviewImageContainer"
-          // @ts-expect-error Type 'undefined' is not assignable to type 'string | number'
           style={getFramePreviewImgContainerStyle(thumbnailInfo())}
           onMouseDown={this.onThumbnailClick}
           ref={node => (this._thumbnailContainerElement = node)}>