Add SkipNav story and tests

package.json

@@ -101,6 +101,7 @@
     "npm-run-all": "4.1.5",
     "postcss": "8.5.6",
     "prettier": "3.8.1",
+    "react-docgen-typescript": "^2.4.0",
     "rollup-plugin-jsx-remove-attributes": "^3.1.2",
     "sass": "^1.97.3",
     "start-server-and-test": "2.1.3",

src/components/SkipNav/SkipNav.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkipNav } from '~/src/index';
+
+const meta: Meta<typeof SkipNav> = {
+  title: 'Components (Draft)/Skip Navigation',
+  tags: ['autodocs'],
+  component: SkipNav,
+  argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: properties => <SkipNav {...properties} />,
+  args: {
+    href: '#main'
+  }
+};

src/components/SkipNav/SkipNav.test.tsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import SkipNav from './SkipNav';
+
+describe('<SkipNav />', () => {
+  it('renders the default link', () => {
+    render(<SkipNav />);
+    const link = screen.getByRole('link', { name: /skip to main content/i });
+    expect(link).toHaveAttribute('href', '#main');
+    expect(link).toHaveClass('skip-nav__link');
+  });
+
+  it('receives focus when tabbing', async () => {
+    const user = userEvent.setup();
+    render(<SkipNav />);
+    await user.tab();
+    const link = screen.getByRole('link', { name: /skip to main content/i });
+    expect(link).toHaveFocus();
+  });
+});

src/components/SkipNav/SkipNav.tsx

@@ -1,15 +1,29 @@
 import type { JSXElement } from '../../types/jsxElement';
 import './SkipNav.scss';
+import { Link } from '~/src';
 
+export interface SkipNavProperties {
+  href?: string;
+}
+
+/**
+ * A SkipNav (skip navigation) link is an accessibility feature, usually hidden
+ * until focused, placed at the top of a webpage to allow keyboard and screen
+ * reader users to bypass repetitive navigation menus and jump directly to the
+ * main content. It acts as an anchor link, enhancing user experience and
+ * efficiency.
+ */
 export default function SkipNav({
-  href = '#main',
-  text = 'Skip to main content'
-}): JSXElement {
+  href = '#main'
+}: SkipNavProperties): JSXElement {
   return (
     <div className='skip-nav'>
-      <a className='skip-nav__link a-btn' href={href}>
-        {text}
-      </a>
+      <Link
+        href={href}
+        label={'Skip to main content'}
+        className={'skip-nav__link'}
+        asButton
+      />
     </div>
   );
 }

yarn.lock

@@ -1283,6 +1283,7 @@ __metadata:
     postcss: "npm:8.5.6"
     prettier: "npm:3.8.1"
     react: "npm:19.2.4"
+    react-docgen-typescript: "npm:^2.4.0"
     react-dom: "npm:19.2.4"
     react-router-dom: "npm:^7.13.0"
     react-select: "npm:^5.10.2"
@@ -9062,7 +9063,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen-typescript@npm:^2.2.2":
+"react-docgen-typescript@npm:^2.2.2, react-docgen-typescript@npm:^2.4.0":
   version: 2.4.0
   resolution: "react-docgen-typescript@npm:2.4.0"
   peerDependencies: