Add link to tools menu for table

packages/pxweb2/public/locales/ar/translation.json

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

packages/pxweb2/public/locales/en/translation.json

@@ -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",

packages/pxweb2/public/locales/no/translation.json

@@ -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",

packages/pxweb2/public/locales/sv/translation.json

@@ -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",

packages/pxweb2/src/@types/resources.d.ts

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

packages/pxweb2/src/app/components/SkipToMain/SkipLink.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import cl from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useSearchParams } from 'react-router';
+
+import classes from './SkipToMain.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 SkipLinkProps = React.HTMLAttributes<HTMLDivElement> & {
+  targetId: string;
+  translationKey: SkipTranslationKey;
+};
+
+export const SkipLink = React.forwardRef<HTMLDivElement, SkipLinkProps>(
+  ({ targetId, translationKey, ...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}`;
+
+    return (
+      <div
+        ref={ref}
+        className={cl(classes['skip-to-main'], classes['screen-reader-only'])}
+        {...props}
+      >
+        <Link href={path} size="medium">
+          {t(translationKey)}
+        </Link>
+      </div>
+    );
+  },
+);
+
+SkipLink.displayName = 'SkipLink';

packages/pxweb2/src/app/components/SkipToMain/SkipToMain.tsx

@@ -1,47 +1,17 @@
 import React from 'react';
-import cl from 'clsx';
-import { useTranslation } from 'react-i18next';
-import { useLocation, useSearchParams } from 'react-router';
-
-import classes from './SkipToMain.module.scss';
-import { Link } from '@pxweb2/pxweb2-ui';
-import { getConfig } from '../../util/config/getConfig';
-import { getLanguagePath } from '../../util/language/getLanguagePath';
+import { SkipLink } from './SkipLink';
 
 export const SkipToMain = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >((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(); // URLSearchParams handles encoding
-  const params = paramsString ? `?${paramsString}` : '';
-  const path = `${basePath}${params}#px-main-content`;
-
   return (
-    <div
+    <SkipLink
       ref={ref}
-      className={cl(classes['skip-to-main'], classes['screen-reader-only'])}
+      targetId="px-main-content"
+      translationKey="common.skip_to_main"
       {...props}
-    >
-      <Link href={path} size="medium">
-        {t('common.skip_to_main')}
-      </Link>
-    </div>
+    />
   );
 });
 

packages/pxweb2/src/app/components/SkipToMain/SkipToToolsMenu.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SkipLink } from './SkipLink';
+
+export const SkipToToolsMenu = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>((props, ref) => {
+  return (
+    <SkipLink
+      ref={ref}
+      targetId="px-table-viewer-outer-container"
+      translationKey="common.skip_to_toolsmenu"
+      {...props}
+    />
+  );
+});
+
+SkipToToolsMenu.displayName = 'SkipToToolsMenu';

packages/pxweb2/src/app/pages/TableViewer/TableViewer.tsx

@@ -10,6 +10,7 @@ import { NavigationItem } from '../../components/NavigationMenu/NavigationItem/N
 import NavigationRail from '../../components/NavigationMenu/NavigationRail/NavigationRail';
 import NavigationBar from '../../components/NavigationMenu/NavigationBar/NavigationBar';
 import { SkipToMain } from '../../components/SkipToMain/SkipToMain';
+import { SkipToToolsMenu } from '../../components/SkipToMain/SkipToToolsMenu';
 import { Footer } from '../../components/Footer/Footer';
 import useAccessibility from '../../context/useAccessibility';
 import useApp from '../../context/useApp';
@@ -173,13 +174,17 @@ export function TableViewer() {
   };
 
   const isSmallScreen = isTablet === true || isMobile === true;
-
   return (
     <>
-      <SkipToMain ref={skipToMainRef} />
+      <div ref={skipToMainRef}>
+        <SkipToMain />
+        <SkipToToolsMenu />
+      </div>
+
       {!isSmallScreen && <Header />}
       {/* tabindex={-1} to fix firefox focusing this div*/}
       <div
+        id="px-table-viewer-outer-container"
         ref={isSmallScreen ? outerContainerRef : undefined}
         className={styles.navigationAndContentContainer}
         tabIndex={-1}