index.tsx

/* eslint-disable-next-line */
import React from 'react';
import { w } from 'windstitch';

export const SkipToMainContent = w.button(
  `
  mr-4 absolute translate-x-[-200%] transition-transform duration-300
  focus:static focus:translate-x-0
  bg-violet-500
  hover:bg-violet-400
  dark:bg-violet-700
  dark:hover:bg-violet-600
  text-white
  dark:text-white
  ring-violet-400
  px-4 py-2
`,
);
SkipToMainContent.displayName = 'Button';

interface SkipToMainProps{
  className?: string;

  children: React.ReactElement;
  /**
   * The css query aiding the selection of the
   * container (main, section etc) we want to scroll to;
   */
  skipTo: string;
}
export interface SkipToMainContentLinkProps extends Omit<SkipToMainProps, 'children'>{
  children?: React.ReactElement;
}

const SkipToMain = (props: SkipToMainProps) => {
  const onClick = (event: React.SyntheticEvent) => {
    event.preventDefault();

    const container: (HTMLElement | null) = document.querySelector(props.skipTo);

    if (container) {
      container.tabIndex = -1;
      container.focus();
      setTimeout(() => container.removeAttribute("tabindex"), 1000);
    }
  };

  return React.cloneElement(props.children, { onClick, className: props.className });
}

export const SkipToMainContentLink = (props: SkipToMainContentLinkProps) => {
  return (
    <SkipToMain {...props}>
    {props.children || <SkipToMainContent>Skip to content</SkipToMainContent>}
    </SkipToMain>
  )
}

SkipToMainContentLink.defaultProps = {
  className: "skip-link",
  skipTo: "main:first-of-type",
};

export default SkipToMainContentLink;