chore(skiplink): simplify DOM (#2577)

resolves #2574
digdir · Oct 7, 2024 · fe20145 · fe20145
1 parent bc191e4
commit fe20145
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 29 deletions.
diff --git a/.changeset/cyan-adults-roll.md b/.changeset/cyan-adults-roll.md
@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Skiplink:
+- Simplify DOM
+- Add support for `forwardRef`
diff --git a/packages/css/skiplink.css b/packages/css/skiplink.css
@@ -14,20 +14,11 @@
   clip: auto;
   clip-path: none;
   white-space: inherit;
-  text-decoration: none;
   padding: var(--ds-spacing-4);
-  color: var(--ds-color-neutral-text-default);
+  color: var(--ds-color-accent-text-default);
   background: var(--ds-color-accent-surface-hover);
   box-sizing: border-box;
-}
-
-.ds-skiplink__content {
-  color: var(--dsc-link-color);
   text-decoration: underline;
   text-decoration-thickness: max(1px, 0.0625rem);
   text-underline-offset: max(5px, 0.25rem);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ds-spacing-1);
-  margin: 0;
 }
diff --git a/packages/react/src/components/SkipLink/SkipLink.stories.tsx b/packages/react/src/components/SkipLink/SkipLink.stories.tsx
@@ -11,12 +11,14 @@ export default {
 } as Meta;
 
 export const Preview: Story = () => (
-  <Paragraph>
-    For å vise skiplinken, tab til dette eksempelet, eller klikk inni eksempelet
-    og trykk <kbd>Tab</kbd>.
-    <SkipLink href='#main-content'>Hopp til hovedinnhold</SkipLink>
+  <>
+    <Paragraph>
+      For å vise skiplinken, tab til dette eksempelet, eller klikk inni
+      eksempelet og trykk <kbd>Tab</kbd>.
+      <SkipLink href='#main-content'>Hopp til hovedinnhold</SkipLink>
+    </Paragraph>
     <main id='main-content' tabIndex={-1}>
       Region som kan motta fokus fra skiplink.
     </main>
-  </Paragraph>
+  </>
 );
diff --git a/packages/react/src/components/SkipLink/SkipLink.tsx b/packages/react/src/components/SkipLink/SkipLink.tsx
@@ -1,5 +1,5 @@
 import cl from 'clsx/lite';
-import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import { type AnchorHTMLAttributes, type ReactNode, forwardRef } from 'react';
 
 export type SkipLinkProps = {
   /** The content to display inside the skiplink. */
@@ -9,16 +9,12 @@ export type SkipLinkProps = {
   href: string;
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
 
-export const SkipLink = ({
-  children,
-  className,
-  ...rest
-}: SkipLinkProps): JSX.Element => {
-  return (
-    <a className={cl('ds-skiplink', className)} {...rest}>
-      <p className='ds-skiplink__content'>{children}</p>
-    </a>
-  );
-};
-
-SkipLink.displayName = 'SkipLink';
+export const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(
+  function SkipLink({ children, className, ...rest }) {
+    return (
+      <a className={cl('ds-skiplink', className)} {...rest}>
+        {children}
+      </a>
+    );
+  },
+);