Merge pull request #1488 from navikt/uu-fix-skiplink

skiplink som link + aria-labelled-by for å unngå dobbelt opplesning i SR

src/komponenter/header/common/skiplinks/Skiplink.tsx

@@ -1,31 +1,40 @@
-import React, { useEffect, useState } from 'react';
-import { logAmplitudeEvent } from 'utils/analytics/amplitude';
+import React, {useEffect, useState} from 'react';
+import { LenkeMedSporing } from 'komponenter/common/lenke-med-sporing/LenkeMedSporing';
+import { AnalyticsEventArgs, AnalyticsCategory } from 'utils/analytics/analytics';
 import Tekst from 'tekster/finn-tekst';
 
 import style from './Skiplink.module.scss';
 
 const mainContentId = 'maincontent';
+const mainContentHref = `#${mainContentId}`;
+const skiplinkTextId = 'skiplink-text';
 
 const Skiplink = () => {
     const [hasMainContent, setHasMainContent] = useState(false);
     const linkTextId = 'skiplinks-ga-til-hovedinnhold';
+    const anlyticsProps:AnalyticsEventArgs = {
+        category: AnalyticsCategory.Header,
+        eventName: 'skiplinks',
+        action: linkTextId,
+        destination: mainContentHref,
+    }
 
     useEffect(() => {
         const mainContentElement = document.getElementById(mainContentId);
         setHasMainContent(!!mainContentElement);
     }, []);
 
     return hasMainContent ? (
-        <nav aria-label="Hopp til innhold">
-            <button
+        <nav aria-labelledby={skiplinkTextId}>
+            <LenkeMedSporing
+                href={mainContentHref}
                 className={style.skiplink}
-                onClick={() => {
-                    logAmplitudeEvent('skiplinks', { kilde: 'header', fritekst: linkTextId });
-                    document.getElementById(mainContentId)?.focus();
-                }}
+                analyticsEventArgs={anlyticsProps}
             >
-                <Tekst id={linkTextId} />
-            </button>
+                <span id={skiplinkTextId}>
+                    <Tekst id={linkTextId} />
+                </span>
+            </LenkeMedSporing>
         </nav>
     ) : null;
 };