feat: Add skip link to main content

Author: SiniCode

public/locales/en/translation.json

@@ -85,7 +85,8 @@
       "fi": "Valitse kieli: suomi",
       "sv": "Välj språk: svenska",
       "en": "Select language: English"
-    }
+    },
+    "skipToContent": "Skip to content"
   },
   "validationErrors": {
     "required": "This field is required",

public/locales/fi/translation.json

@@ -80,7 +80,8 @@
     "organisationCode": "Organisaatiokoodi",
     "startDate": "Aloituspvm",
     "endDate": "Lopetuspvm",
-    "opensInNewTab": ", avautuu uudelle välilehdelle"
+    "opensInNewTab": ", avautuu uudelle välilehdelle",
+    "skipToContent": "Siirry sisältöön"
   },
   "validationErrors": {
     "required": "Tämä kenttä vaaditaan",

public/locales/sv/translation.json

@@ -75,7 +75,8 @@
     "notEditable": "Inställningen kan inte ändras, då den har offentligjorts på en högre nivå.",
     "feedbacksGivenRatio": "Givna återkopplingar / Antal anmälda studenter",
     "additional": "Ytterligare",
-    "opensInNewTab": ", öppnas i en ny flik"
+    "opensInNewTab": ", öppnas i en ny flik",
+    "skipToContent": "Gå till innehållet"
   },
   "validationErrors": {
     "required": "Fältet krävs",

src/client/components/NavBar/NavBar.jsx

@@ -12,6 +12,7 @@ import {
   Box,
   Container,
   Badge,
+  Link as MuiLink,
 } from '@mui/material'
 import { visuallyHidden } from '@mui/utils'
 import { uniq } from 'lodash-es'
@@ -102,6 +103,22 @@ const styles = {
     color: theme => theme.palette.primary.main,
     fontWeight: theme => theme.typography.fontWeightMedium,
   },
+  skipLink: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    zIndex: 1300,
+    px: 2,
+    py: 1,
+    bgcolor: '#01263a',
+    color: 'white',
+    // Hide visually but keep focusable
+    transform: 'translateY(-100%)',
+    '&:focus': {
+      transform: 'translateY(0)',
+      outline: '2px solid #fff',
+    },
+  },
 }
 
 const NavLabelWrapper = ({ renderBadge, children }) => {
@@ -279,6 +296,9 @@ const NavBar = ({ guest = false }) => {
 
   return (
     <Box component="header" role="banner" id="header">
+      <MuiLink href="#main-content" sx={styles.skipLink}>
+        {t('common:skipToContent')}
+      </MuiLink>
       <UserPermissionsWindow isOpen={permissionsWindowOpen} onClose={() => setPermissionsWindowOpen(false)} />
       {menu}
       <AppBar