ragusa-it/ragusaitweb
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

🎨 Palette: Add accessible Skip to Content link #53

Closed
ragusa-it wants to merge 1 commits from palette-skip-link-1932083823078854221 into main
pull from: palette-skip-link-1932083823078854221
merge into: ragusa-it:main
Conversation 2 Commits 1 Files Changed 10 +67 -4
10 changed files with 67 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { LanguageProvider } from './i18n';
import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout';
import { Home } from './pages/Home';
import { PageLoader } from './components/ui';
import { PageLoader, SkipLink } from './components/ui';
import './styles/global.css';
// Lazy load pages to reduce initial bundle size.
@@ -15,6 +15,7 @@ export function App() {
return (
<LanguageProvider>
<BrowserRouter>
<SkipLink />
<ScrollToTop />
<FancyCursor />
<Navbar />

20
src/components/ui/SkipLink.module.css Normal file
View File

@@ -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;
}

12
src/components/ui/SkipLink.tsx Normal file
View File

@@ -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>
);
}

21
src/components/ui/__tests__/SkipLink.test.tsx Normal file
View File

@@ -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');
});
});

1
src/components/ui/index.ts
View File

@@ -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';

1
src/i18n/de.ts
View File

@@ -4,6 +4,7 @@ export const de = {
home: 'Startseite',
about: 'Über uns',
contact: 'Kontakt',
skipToContent: 'Zum Inhalt springen',
},
// Hero Section

1
src/i18n/en.ts
View File

@@ -6,6 +6,7 @@ export const en: Translations = {
home: 'Home',
about: 'About',
contact: 'Contact',
skipToContent: 'Skip to content',
},
// Hero Section

8
src/pages/About.tsx
View File

@@ -46,7 +46,13 @@ export function About() {
const location = useLocation();
return (
<main className={styles.about} key={location.key}>
<main
id="main-content"
tabIndex={-1}
style={{ outline: 'none' }}
className={styles.about}
copilot-pull-request-reviewer[bot] commented 2026-02-04 01:42:05 +00:00 (Migrated from github.com)
Review
Copy Link

The inline style={{ outline: 'none' }} suppresses the global :focus-visible focus indicator (src/styles/global.css:66-70). That makes the skip-link target focus invisible to keyboard users after jumping to content. Remove the inline outline reset or add a dedicated :focus-visible style for #main-content.
The inline `style={{ outline: 'none' }}` suppresses the global `:focus-visible` focus indicator (`src/styles/global.css:66-70`). That makes the skip-link target focus invisible to keyboard users after jumping to content. Remove the inline outline reset or add a dedicated `:focus-visible` style for `#main-content`. ```suggestion ```
key={location.key}
>
{/* Hero Section */}
copilot-pull-request-reviewer[bot] commented 2026-02-04 01:42:05 +00:00 (Migrated from github.com)
Review
Copy Link

key={location.key} will change when the URL hash updates (e.g., activating the skip link adds #main-content), causing <main> to unmount/remount and potentially drop focus right after the skip link is used. Use a stable key (or remove the key) so hash navigation doesn’t remount the main container.

`key={location.key}` will change when the URL hash updates (e.g., activating the skip link adds `#main-content`), causing `<main>` to unmount/remount and potentially drop focus right after the skip link is used. Use a stable key (or remove the key) so hash navigation doesn’t remount the main container.
<section className={styles.hero}>
<div className="container">

2
src/pages/Contact.tsx
View File

@@ -133,7 +133,7 @@ export function Contact() {
};
return (
<main className={styles.contact}>
<main id="main-content" tabIndex={-1} style={{ outline: 'none' }} className={styles.contact}>
{/* Hero */}
copilot-pull-request-reviewer[bot] commented 2026-02-04 01:42:04 +00:00 (Migrated from github.com)
Review
Copy Link

style={{ outline: 'none' }} on the <main> target prevents any visible focus ring when keyboard users activate the skip link. Since the app has a global :focus-visible outline (src/styles/global.css:66-70), consider removing this inline style or providing an explicit :focus-visible style for the main content target instead.

    <main id="main-content" tabIndex={-1} className={styles.contact}>
`style={{ outline: 'none' }}` on the `<main>` target prevents any visible focus ring when keyboard users activate the skip link. Since the app has a global `:focus-visible` outline (`src/styles/global.css:66-70`), consider removing this inline style or providing an explicit `:focus-visible` style for the main content target instead. ```suggestion <main id="main-content" tabIndex={-1} className={styles.contact}> ```
<section className={styles.hero}>
<div className="container">

2
src/pages/Home.tsx
View File

@@ -2,7 +2,7 @@ import { Hero, Services } from '../components/sections';
export function Home() {
return (
<main>
<main id="main-content" tabIndex={-1} style={{ outline: 'none' }}>
<Hero />
copilot-pull-request-reviewer[bot] commented 2026-02-04 01:42:04 +00:00 (Migrated from github.com)
Review
Copy Link

style={{ outline: 'none' }} removes the global :focus-visible outline (see src/styles/global.css:66-70), so when the skip link moves focus to <main>, there will be no visible focus indicator. Remove the inline outline reset, or replace it with an explicit focus style on the main content container (e.g., CSS #main-content:focus-visible { ... }).

    <main id="main-content" tabIndex={-1}>
`style={{ outline: 'none' }}` removes the global `:focus-visible` outline (see `src/styles/global.css:66-70`), so when the skip link moves focus to `<main>`, there will be no visible focus indicator. Remove the inline outline reset, or replace it with an explicit focus style on the main content container (e.g., CSS `#main-content:focus-visible { ... }`). ```suggestion <main id="main-content" tabIndex={-1}> ```
<Services />
</main>