fix: rename css class, fix click event type

Author: HedwigJDoets

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

@@ -17,7 +17,7 @@ export function SkipLink(props: SkipLinkContainerProps) {
         }
     }, [skipLinkRef.current]);
 
-    function handleClick(event: MouseEvent<HTMLAnchorElement, MouseEvent>): void {
+    function handleClick(event: MouseEvent): void {
         event.preventDefault();
         let main: HTMLElement;
         const mainByID = document.getElementById(props.mainContentId);
@@ -47,7 +47,7 @@ export function SkipLink(props: SkipLinkContainerProps) {
     return (
         <a
             ref={skipLinkRef}
-            className={`skip-link ${props.class}`}
+            className={`widget-skip-link ${props.class}`}
             href={`#${props.mainContentId}`}
             tabIndex={props.tabIndex}
             onClick={handleClick}

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

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