From 45efe2a2c51ab3dc46d21b903390d9ffa17e7678 Mon Sep 17 00:00:00 2001
From: Tzipi-kaltura <tzipi.maksev@kaltura.com>
Date: Thu, 31 Oct 2024 14:57:24 +0200
Subject: [PATCH] fix(ADA-1514): Incorrect focus order is observed when Related
 Files button is activated.

---
 .../attachments-list/attachments-list.tsx     | 23 +++++++++++++++----
 .../captions-list/captions-list.tsx           | 20 +++++++++++-----
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/attachments-list/attachments-list.tsx b/src/components/attachments-list/attachments-list.tsx
index ac87b44..77ba58c 100644
--- a/src/components/attachments-list/attachments-list.tsx
+++ b/src/components/attachments-list/attachments-list.tsx
@@ -27,7 +27,14 @@ export const AttachmentsList = withText({
     return attachment.title || attachment.fileName;
   };
 
-  const _renderDownloadItem = (key: string, fileName: string, downloadUrl: string, icon: ComponentChildren, ariaLabel: string) => {
+  const _renderDownloadItem = (
+    key: string,
+    fileName: string,
+    downloadUrl: string,
+    icon: ComponentChildren,
+    ariaLabel: string,
+    shouldFocusItem: boolean
+  ) => {
     return (
       <DownloadItem
         downloadPluginManager={downloadPluginManager}
@@ -37,14 +44,22 @@ export const AttachmentsList = withText({
         assetType={assetType.Attachments}
         iconFileType={icon}
         ariaLabel={ariaLabel}
-        shouldFocus={shouldFocus}
+        shouldFocus={shouldFocusItem}
       />
     );
   };
 
   const _renderAttachments = (attachments: Array<KalturaAttachmentAsset>) => {
-    return attachments.map((attachment: KalturaAttachmentAsset) => {
-      return _renderDownloadItem(attachment.id, _buildFileName(attachment), attachment.downloadUrl, getIconByFileExt(attachment.fileExt), ariaLabel!);
+    return attachments.map((attachment: KalturaAttachmentAsset, index) => {
+      const shouldFocusItem = index === 0 ? shouldFocus : false;
+      return _renderDownloadItem(
+        attachment.id,
+        _buildFileName(attachment),
+        attachment.downloadUrl,
+        getIconByFileExt(attachment.fileExt),
+        ariaLabel!,
+        shouldFocusItem
+      );
     });
   };
 
diff --git a/src/components/captions-list/captions-list.tsx b/src/components/captions-list/captions-list.tsx
index e8f8497..b9b938b 100644
--- a/src/components/captions-list/captions-list.tsx
+++ b/src/components/captions-list/captions-list.tsx
@@ -44,7 +44,14 @@ export const CaptionsList = withText({
     return `${fileName}.${caption.fileExt}`;
   };
 
-  const _renderDownloadItem = (key: string, fileName: string, languageLabel: string, downloadUrl: string, ariaLabel: string) => {
+  const _renderDownloadItem = (
+    key: string,
+    fileName: string,
+    languageLabel: string,
+    downloadUrl: string,
+    ariaLabel: string,
+    shouldFocusItem: boolean
+  ) => {
     return (
       <DownloadItem
         downloadPluginManager={downloadPluginManager}
@@ -55,13 +62,14 @@ export const CaptionsList = withText({
         assetType={assetType.Captions}
         iconFileType={<CommonIcon name={'closedCaptions'} />}
         ariaLabel={ariaLabel}
-        shouldFocus={shouldFocus}
+        shouldFocus={shouldFocusItem}
       />
     );
   };
 
-  const _renderCaption = (caption: KalturaCaptionAsset) => {
-    return _renderDownloadItem(caption.id, _buildFileName(caption), caption.label, caption.downloadUrl, ariaLabel!);
+  const _renderCaption = (caption: KalturaCaptionAsset, firstItemInList?: boolean) => {
+    const shouldFocusItem = !!(shouldFocus && firstItemInList);
+    return _renderDownloadItem(caption.id, _buildFileName(caption), caption.label, caption.downloadUrl, ariaLabel!, shouldFocusItem);
   };
 
   const _renderCaptions = (captions: Array<KalturaCaptionAsset>) => {
@@ -75,7 +83,7 @@ export const CaptionsList = withText({
   const _renderExpandableCaptions = () => {
     return (
       <ExpandableContainer
-        defaultItem={_renderCaption(defaultCaptions!)}
+        defaultItem={_renderCaption(defaultCaptions!, true)}
         restOfItems={_renderCaptions(captions)}
         showMoreLabel={moreCaptionsLabel!}
         showLessLabel={lessCaptionsLabel!}
@@ -85,7 +93,7 @@ export const CaptionsList = withText({
 
   return (
     <div className={styles.captionsContainer} data-testid={'download-overlay-captions-container'}>
-      {captions.length > 1 ? _renderExpandableCaptions() : _renderCaption(defaultCaptions!)}
+      {captions.length > 1 ? _renderExpandableCaptions() : _renderCaption(defaultCaptions!, true)}
     </div>
   );
 });