fix: implement review comments

Author: HedwigJDoets

packages/pluggableWidgets/skiplink-web/src/SkipLink.editorPreview.tsx

@@ -7,19 +7,7 @@ export const preview = (props: SkipLinkPreviewProps): ReactElement => {
             <div style={{ position: "relative", height: 40 }}>
                 <a
                     href={`#${props.mainContentId}`}
-                    style={{
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        background: "#fff",
-                        color: "#0078d4",
-                        padding: "8px 16px",
-                        zIndex: 1000,
-                        textDecoration: "none",
-                        border: "2px solid #0078d4",
-                        borderRadius: 4,
-                        fontWeight: "bold"
-                    }}
+                    style={props.styleObject}
                 >
                     {props.linkText}
                 </a>
@@ -29,19 +17,7 @@ export const preview = (props: SkipLinkPreviewProps): ReactElement => {
         return (
             <a
                 href={`#${props.mainContentId}`}
-                style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    background: "#fff",
-                    color: "#0078d4",
-                    padding: "8px 16px",
-                    zIndex: 1000,
-                    textDecoration: "none",
-                    border: "2px solid #0078d4",
-                    borderRadius: 4,
-                    fontWeight: "bold"
-                }}
+                style={props.styleObject}
             >
                 {props.linkText}
             </a>

packages/pluggableWidgets/skiplink-web/src/SkipLink.tsx

@@ -1,4 +1,5 @@
-import { MouseEvent, useEffect, useRef } from "react";
+import { MouseEvent, useState } from "react";
+import { createPortal } from 'react-dom';
 import "./ui/SkipLink.scss";
 import { SkipLinkContainerProps } from "typings/SkipLinkProps";
 
@@ -7,23 +8,32 @@ import { SkipLinkContainerProps } from "typings/SkipLinkProps";
  * When activated, focus is programmatically set to the main content.
  */
 export function SkipLink(props: SkipLinkContainerProps) {
-    const skipLinkRef = useRef<HTMLAnchorElement | null>(null);
-
-    useEffect(() => {
-        // Insert as the first child of the element with ID 'root'
-        const root = document.getElementById("root");
-        if (root && skipLinkRef.current) {
-            root.insertBefore(skipLinkRef.current, root.firstChild);
+    const [linkRoot] = useState(() => {           
+        const link = document.createElement('div');
+         const root = document.getElementById("root");
+        // Insert as first child immediately
+        if (root && root.firstElementChild) {
+            root.insertBefore(link, root.firstElementChild);
+        } else if (root) {
+            root.appendChild(link);
+        } else{
+            console.error("No root element found on page");
         }
-    }, [skipLinkRef.current]);
+        return link;
+    })
 
     function handleClick(event: MouseEvent): void {
         event.preventDefault();
         let main: HTMLElement;
-        const mainByID = document.getElementById(props.mainContentId);
-        if (props.mainContentId !== "" && mainByID !== null) {
-            main = mainByID;
-        } else {
+        if(props.mainContentId !== "") {
+            const mainByID = document.getElementById(props.mainContentId);
+            if (mainByID !== null) {
+                main = mainByID;
+            } else{
+                console.error(`Element with id: ${props.mainContentId} not found on page`);
+                return;
+            }
+        } else{ 
             main = document.getElementsByTagName("main")[0];
         }
 
@@ -44,15 +54,14 @@ export function SkipLink(props: SkipLinkContainerProps) {
         }
     }
 
-    return (
+    return createPortal(
         <a
-            ref={skipLinkRef}
             className={`widget-skip-link ${props.class}`}
             href={`#${props.mainContentId}`}
             tabIndex={props.tabIndex}
             onClick={handleClick}
         >
             {props.linkText}
-        </a>
+        </a>, linkRoot
     );
 }

packages/pluggableWidgets/skiplink-web/src/ui/SkipLink.scss

@@ -1,4 +1,4 @@
-.widget.skip-link {
+.widget-skip-link {
     position: absolute;
     top: 0;
     left: 0;
@@ -14,7 +14,7 @@
     font-weight: bold;
 }
 
-.widget.skip-link:focus {
+.widget-skip-link:focus {
     transform: translateY(0);
     outline: none;
 }