PxTools · KentMossback · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026
@@ -24,6 +24,7 @@
       }
     },
     "skip_to_main": "انتقل إلى المحتوى الرئيسي",
+    "skip_to_toolsmenu": "  انتقل إلى قائمة الأدوات",
     "switch_language_landmark": "اختر اللغة",
     "footer": {
       "language_header": "اللغة",

@@ -24,6 +24,7 @@
       }
     },
     "skip_to_main": "Skip to main content",
+    "skip_to_toolsmenu": "Skip to tool menu for table",
     "switch_language_landmark": "Select language",
     "footer": {
       "language_header": "Language",

@@ -23,7 +23,8 @@
         "action_text": "Last siden på nytt"
       }
     },
-    "skip_to_main": "Hopp til hovedinnhold",
+    "skip_to_main": "Gå til hovedinnhold",
+    "skip_to_toolsmenu": "Gå til verktøymeny for tabell",
     "switch_language_landmark": "Velg språk",
     "footer": {
       "language_header": "Språk",

@@ -24,6 +24,7 @@
       }
     },
     "skip_to_main": "Gå direkt till huvudinnehållet",
+    "skip_to_toolsmenu": "Gå direkt till verktygsmeny för tabell",
     "switch_language_landmark": "Välj språk",
     "footer": {
       "language_header": "Språk",

@@ -58,6 +58,7 @@ interface Resources {
         logo_alt: 'To the front page';
       };
       skip_to_main: 'Skip to main content';
+      skip_to_toolsmenu: 'Skip to tool menu for table';
       status_messages: {
         drawer_edit: 'More tools for editing the table are under construction.';
         drawer_help: 'The help section is under construction. It will be possible to set up links that point directly to your own help pages.';

@@ -1,3 +1,14 @@
+.skip-to-main {
+  &:focus-within {
+    display: flex;
+    background-color: var(--px-color-surface-inverted);
+    width: 100%;
+    height: 48px;
+    justify-content: center;
+    margin: -1px;
+  }
+}
+
 .skip-to-content {
   &:focus-within {
     display: flex;
@@ -8,6 +19,7 @@
   }
 }
 
+.skip-to-main a,
 .skip-to-content a {
   justify-content: center;
   background-color: var(--px-color-surface-inverted);
@@ -28,16 +40,16 @@
   }
 }
 
-.screen-reader-only {
+.screen-reader-only-main {
+  &:not(:focus-within) {
+    position: absolute;
+    left: -99999px;
+  }
+}
+
+.screen-reader-only-content {
   &:not(:focus-within) {
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
     position: absolute;
+    left: -99999px;
   }
 }
@@ -0,0 +1,75 @@
+import React from 'react';
+import cl from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useSearchParams } from 'react-router';
+
+import classes from './SkipToTarget.module.scss';
+import { Link } from '@pxweb2/pxweb2-ui';
+import { getConfig } from '../../util/config/getConfig';
+import { getLanguagePath } from '../../util/language/getLanguagePath';
+
+type SkipTranslationKey = 'common.skip_to_main' | 'common.skip_to_toolsmenu';
+
+export type SkipToTargetProps = React.HTMLAttributes<HTMLDivElement> & {
+  targetId: string;
+  translationKey?: SkipTranslationKey;
+  label?: string;
+  styleVariant?: 'main' | 'content';
+};
+
+export const SkipToTarget = React.forwardRef<HTMLDivElement, SkipToTargetProps>(
+  (
+    {
+      targetId,
+      translationKey,
+      label,
+      styleVariant = 'main',
+      className = '',
+      ...props
+    },
+    ref,
+  ) => {
+    const { t, i18n } = useTranslation();
+    const config = getConfig();
+    const location = useLocation().pathname;
+    const [searchParams] = useSearchParams();
+
+    const basePath = getLanguagePath(
+      location,
+      i18n.language,
+      config.language.supportedLanguages,
+      config.language.defaultLanguage,
+      config.language.showDefaultLanguageInPath,
+      config.baseApplicationPath,
+      config.language.positionInPath,
+    );
+
+    // Build a single, URL-encoded query string from the search params.
+    const paramsString = searchParams.toString();
+    const params = paramsString ? `?${paramsString}` : '';
+    const path = `${basePath}${params}#${targetId}`;
+    const linkText = label ?? (translationKey ? t(translationKey) : '');
+
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          styleVariant === 'content'
+            ? classes['skip-to-content']
+            : classes['skip-to-main'],
+          styleVariant === 'content'
+            ? classes['screen-reader-only-content']
+            : classes['screen-reader-only-main'],
+          className,
+        )}
+        {...props}
+      >
+        <Link href={path} size="medium">
+          {linkText}
+        </Link>
+      </div>
+    );
+  },
+);
+
+SkipToTarget.displayName = 'SkipToTarget';
@@ -33,7 +33,7 @@ import { Header } from '../../components/Header/Header';
 import { Footer } from '../../components/Footer/Footer';
 import { ErrorMessage } from '../../components/ErrorMessage/ErrorMessage';
 import { FilterSidebar } from '../../components/FilterSidebar/FilterSidebar';
-import { SkipToContent } from '../../components/SkipToContent/SkipToContent';
+import { SkipToTarget } from '../../components/SkipToTarget/SkipToTarget';
 import { ActionType } from './StartPageTypes';
 import {
   getSubjectTree,
@@ -736,11 +736,13 @@ const StartPage = () => {
   return (
     <>
       <nav>
-        <SkipToContent
+        <SkipToTarget
+          styleVariant="content"
           targetId="px-start-filter"
           label={t('start_page.skip_to.filter')}
         />
-        <SkipToContent
+        <SkipToTarget
+          styleVariant="content"
           targetId="px-start-result"
           label={t('start_page.skip_to.result')}
         />