From 982f812e28d4a2d4dcf15987bc6103380db838e5 Mon Sep 17 00:00:00 2001
From: Tzipi-kaltura <tzipi.maksev@kaltura.com>
Date: Sun, 30 Jun 2024 15:53:02 +0300
Subject: [PATCH] =?UTF-8?q?fix(ADA-1335):=20Accessibility-=20=E2=80=9CClos?=
 =?UTF-8?q?e=E2=80=9D=20button=20within=20the=20info=20video=20panel.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/info/index.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/info/index.tsx b/src/components/info/index.tsx
index ea38f4a..5677890 100644
--- a/src/components/info/index.tsx
+++ b/src/components/info/index.tsx
@@ -27,7 +27,7 @@ interface ConnectProps {
 interface KeyboardA11yProps {
   handleKeyDown?: () => void;
   setIsModal?: (isModel: boolean) => void;
-  addAccessibleChild?: (element: HTMLElement) => void;
+  addAccessibleChild?: (element: HTMLElement, pushToBeginning?: boolean) => void;
 }
 
 type MergedProps = InfoProps & ConnectProps & KeyboardA11yProps;
@@ -47,6 +47,7 @@ const translates = ({plays, creator}: InfoProps) => {
 @withKeyboardA11y
 @withText(translates)
 export class Info extends Component<MergedProps> {
+  private _descriptionDivRed: HTMLDivElement | null = null;
   renderMediaInfo = () => {
     const {creator, createdAt, plays, creatorText, playsText} = this.props;
 
@@ -76,6 +77,18 @@ export class Info extends Component<MergedProps> {
 
   componentDidMount(): void {
     this.props.setIsModal && this.props.setIsModal(true);
+    this._addElementsToAccessibleList();
+  }
+
+  private _addElementsToAccessibleList(): void {
+    if (this._descriptionDivRed) {
+      const linkElements = Array.from(this._descriptionDivRed.querySelectorAll('a')).reverse();
+      linkElements.forEach(element => {
+        if (element.hasAttribute('href')) {
+          this.props.addAccessibleChild && this.props.addAccessibleChild(element! as HTMLElement, true);
+        }
+      });
+    }
   }
 
   render(props: MergedProps) {
@@ -92,7 +105,12 @@ export class Info extends Component<MergedProps> {
             </div>
             {this.renderMediaInfo()}
             {description && (
-              <div data-testid="entryDescription" className={styles.entryDescription} dangerouslySetInnerHTML={{__html: sanitizeHtml(description)}} />
+              <div
+                data-testid="entryDescription"
+                className={styles.entryDescription}
+                dangerouslySetInnerHTML={{__html: sanitizeHtml(description)}}
+                ref={node => (this._descriptionDivRed = node)}
+              />
             )}
           </div>
         </Overlay>