fix(ADA-1335): Accessibility- “Close” button within the info video pa…

…nel. (#101)

Issue:
When adding a elements in the entry description it's added as a link in info plugin but it is not accessible when pressing on tab, the focus always stay on the close button.

Solution:
Adding the links elements to the accessible child element in the popup-keyboard-accessibility.
Since this is added after the x button need to push it to the beginning of the list (otherwise the focus continue to stay on x button)

Change also done in ui repo - #900 checking if we want to push to the beginning or to the end

ADA-1335

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>