feat(a11y): add skip to content link

- Add SkipLink component that links to #main-content
- Add nav.skipToContent translation key
- Integrate SkipLink in App.tsx
- Add id="main-content" to main elements in pages
- Add test for SkipLink

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>

src/components/ui/SkipLink.module.css

@@ -0,0 +1,20 @@
+.skipLink {
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding: 1rem;
+  background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+  z-index: 9999;
+  transform: translateY(-100%);
+  transition: transform 0.2s ease-in-out;
+  text-decoration: none;
+  font-weight: bold;
+  border-bottom-right-radius: 8px;
+}
+
+.skipLink:focus {
+  transform: translateY(0);
+  outline: 2px solid var(--md-sys-color-on-primary-container);
+  outline-offset: -2px;
+}

src/components/ui/SkipLink.tsx

@@ -0,0 +1,12 @@
+import { useTranslation } from '../../i18n';
+import styles from './SkipLink.module.css';
+
+export function SkipLink() {
+  const { t } = useTranslation();
+
+  return (
+    <a href="#main-content" className={styles.skipLink}>
+      {t.nav.skipToContent}
+    </a>
+  );
+}

src/components/ui/__tests__/SkipLink.test.tsx

@@ -0,0 +1,21 @@
+// @vitest-environment jsdom
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { SkipLink } from '../SkipLink';
+import { LanguageProvider } from '../../../i18n';
+
+describe('SkipLink', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders correctly', () => {
+    render(
+      <LanguageProvider>
+        <SkipLink />
+      </LanguageProvider>
+    );
+    const link = screen.getByRole('link');
+    expect(link.getAttribute('href')).toBe('#main-content');
+  });
+});

src/components/ui/index.ts

@@ -2,3 +2,4 @@ export { Button } from './Button';
 export { Card } from './Card';
 export { Input, Textarea } from './Input';
 export { PageLoader } from './PageLoader';
+export { SkipLink } from './SkipLink';