import { useTranslation } from 'react-i18next';

/** The id the skip link targets. Exported so the main region cannot drift. */
export const MAIN_CONTENT_ID = 'ema-main-content';

/**
 * "Skip to main content" — the first thing a keyboard user should reach.
 *
 * Both apps put a sidebar of 20-plus navigation items before the page body, so
 * without this, reaching the actual content means tabbing through every one of
 * them on every navigation. WCAG 2.4.1 asks for a bypass; there was none.
 *
 * Hidden until focused, which is why it is positioned off-screen rather than
 * `display: none` — the latter would make it unfocusable and defeat the point.
 * Styling lives in `semantic.css` as `.ema-skip-link`.
 *
 * Render it as the first child of the shell, before the header.
 */
export function SkipLink() {
  const { t } = useTranslation();

  return (
    <a className="ema-skip-link" href={`#${MAIN_CONTENT_ID}`}>
      {t('a11y.skipToContent', 'Skip to main content')}
    </a>
  );
}