SkipLink

molecules

Skip-to-main-content link. Hidden off-screen at top:-40px, slides down on focus. WCAG 2.4.1 Bypass Blocks.

ARIA Role: link

Demo

Demo for SkipLink (molecules)

Skip-to-main-content link. Hidden off-screen at top:-40px, slides down on focus. WCAG 2.4.1 Bypass Blocks.

TypeScript Interface

interface SkipLinkProps {
  href?: string;
  children?: React.ReactNode;
}

Assertions (NASA Rule 5)

  • [aria]MUST be the first focusable element on the page(WCAG 2.4.1)
  • [render]When focused, link slides into view at top:8px; hidden via transform not display:none (preserves focus order)(WCAG 2.4.3)

Usage

Import

import { Skiplink } from '@epasslive/design-system'

Basic

<Skiplink />

With Variants

<Skiplink variant="primary" size="md" />