♿️(frontend) add skip link component for keyboard navigation

Improve a11y: skip to main heading, bypass header. RGAA 12.7.

Author: Ovgodd

src/frontend/src/layout/Layout.tsx

@@ -5,6 +5,7 @@ import { layoutStore } from '@/stores/layout'
 import { useSnapshot } from 'valtio'
 import { Footer } from '@/layout/Footer'
 import { ScreenReaderAnnouncer } from '@/primitives'
+import { SkipLink, MAIN_CONTENT_ID } from './SkipLink'
 
 export type Layout = 'fullpage' | 'centered'
 
@@ -21,6 +22,7 @@ export const Layout = ({ children }: { children: ReactNode }) => {
 
   return (
     <>
+      <SkipLink />
       <div
         className={css({
           display: 'flex',
@@ -35,6 +37,7 @@ export const Layout = ({ children }: { children: ReactNode }) => {
       >
         {showHeader && <Header />}
         <main
+          id={MAIN_CONTENT_ID}
           className={css({
             flexGrow: 1,
             overflow: 'auto',

src/frontend/src/layout/SkipLink.tsx

@@ -0,0 +1,71 @@
+import { type MouseEvent, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export const MAIN_CONTENT_ID = 'main-content'
+
+const hiddenStyle: React.CSSProperties = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+}
+
+const visibleStyle: React.CSSProperties = {
+  position: 'fixed',
+  top: '0.5rem',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  width: 'auto',
+  height: 'auto',
+  margin: 0,
+  padding: '0.625rem 1rem',
+  overflow: 'visible',
+  clip: 'auto',
+  whiteSpace: 'normal',
+  zIndex: 9999,
+  backgroundColor: 'white',
+  color: 'var(--colors-primary-800)',
+  fontWeight: 500,
+  fontSize: '0.875rem',
+  textDecoration: 'none',
+  border: '1px solid var(--colors-primary-800)',
+  borderRadius: 4,
+  outline: '2px solid var(--colors-focus-ring)',
+  outlineOffset: 2,
+}
+
+export const SkipLink = () => {
+  const { t } = useTranslation()
+  const [isFocused, setIsFocused] = useState(false)
+
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    const main = document.getElementById(MAIN_CONTENT_ID)
+    if (!main) return
+
+    const heading = main.querySelector('h1, h2, h3') as HTMLElement | null
+    const target = heading ?? main
+
+    if (!target.hasAttribute('tabindex')) {
+      target.setAttribute('tabindex', '-1')
+    }
+    target.focus()
+  }
+
+  return (
+    <a
+      href={`#${MAIN_CONTENT_ID}`}
+      style={isFocused ? visibleStyle : hiddenStyle}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      onClick={handleClick}
+    >
+      {t('skipLink')}
+    </a>
+  )
+}

src/frontend/src/locales/de/global.json

@@ -52,6 +52,7 @@
       "label": "OK"
     }
   },
+  "skipLink": "Zum Hauptinhalt springen",
   "clipboardContent": {
     "url": "Um an der Videokonferenz teilzunehmen, klicken Sie auf diesen Link: {{roomUrl}}",
     "numberAndPin": "Um telefonisch teilzunehmen, wählen Sie {{phoneNumber}} und geben Sie diesen Code ein: {{pinCode}}"

src/frontend/src/locales/en/global.json

@@ -52,6 +52,7 @@
       "label": "OK"
     }
   },
+  "skipLink": "Skip to main content",
   "clipboardContent": {
     "url": "To join the video conference, click on this link: {{roomUrl}}",
     "numberAndPin": "To join by phone, dial {{phoneNumber}} and enter this code: {{pinCode}}"

src/frontend/src/locales/fr/global.json

@@ -52,6 +52,7 @@
       "label": "OK"
     }
   },
+  "skipLink": "Aller au contenu principal",
   "clipboardContent": {
     "url": "Pour participer à la visioconférence, cliquez sur ce lien : {{roomUrl}}",
     "numberAndPin": "Pour participer par téléphone, composez le {{phoneNumber}} et saisissez ce code : {{pinCode}}"

src/frontend/src/locales/nl/global.json

@@ -51,6 +51,7 @@
       "label": "OK"
     }
   },
+  "skipLink": "Naar de hoofdinhoud gaan",
   "clipboardContent": {
     "url": "Klik op deze link om deel te nemen aan de videoconferentie: {{roomUrl}}",
     "numberAndPin": "Bel {{phoneNumber}} en voer deze code in om telefonisch deel te nemen: {{pinCode}}"

src/frontend/src/styles/index.css

@@ -22,6 +22,11 @@ body,
   outline: 2px solid transparent;
 }
 
+main#main-content :is(h1, h2, h3)[tabindex='-1']:focus {
+  outline: 2px solid var(--colors-focus-ring);
+  outline-offset: 2px;
+}
+
 [data-rac][data-focus-visible]:not(label, .react-aria-Select),
 :is(a, button, input[type='text'], select, textarea):not(
     [data-rac]