maternal-app/maternal-web/components/common/SkipNavigation.tsx

'use client';

import React from 'react';

/**
 * SkipNavigation Component
 *
 * Provides a "Skip to main content" link for keyboard users,
 * allowing them to bypass repetitive navigation and jump directly to the main content.
 *
 * This is a WCAG 2.1 Level A requirement (2.4.1 Bypass Blocks).
 *
 * The link is visually hidden until it receives keyboard focus,
 * at which point it appears at the top of the page.
 */
export function SkipNavigation() {
  const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    const mainContent = document.getElementById('main-content');
    if (mainContent) {
      mainContent.focus();
      mainContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <a
      href="#main-content"
      className="skip-link"
      onClick={handleSkip}
      aria-label="Skip to main content"
    >
      Skip to main content
    </a>
  );
}