Feature/pxweb2 404 skip to main link (#404)

* Added text for language support * Added skip to main component * Added id for skip link. Added SkipToMain component in app.tsx. * Change selector to hide div when link inside is not focused.
PxTools · Dec 9, 2024 · 4bfa70f · 4bfa70f
1 parent 069d593
commit 4bfa70f
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 1 deletion.
diff --git a/packages/pxweb2/public/locales/ar/translation.json b/packages/pxweb2/public/locales/ar/translation.json
@@ -9,6 +9,7 @@
       "title": "PxWeb 2.0 [Main]",
       "logo": "بيكس ويب 2.0"
     },
+    "skip_to_main": "انتقل إلى المحتوى الرئيسي",
     "footer": {
       "contact": {
         "title": "اتصال",

diff --git a/packages/pxweb2/public/locales/en/translation.json b/packages/pxweb2/public/locales/en/translation.json
@@ -9,6 +9,7 @@
       "title": "PxWeb 2.0 [Main]",
       "logo": "PxWeb 2.0"
     },
+    "skip_to_main": "Skip to main content",
     "footer": {
       "contact": {
         "title": "Contact",

diff --git a/packages/pxweb2/public/locales/no/translation.json b/packages/pxweb2/public/locales/no/translation.json
@@ -9,6 +9,7 @@
       "title": "PxWeb 2.0 [Main]",
       "logo": "PxWeb 2.0"
     },
+    "skip_to_main": "Hopp til hovedinnhold",
     "footer": {
       "contact": {
         "title": "Kontakt",

diff --git a/packages/pxweb2/public/locales/sv/translation.json b/packages/pxweb2/public/locales/sv/translation.json
@@ -9,6 +9,7 @@
       "title": "PxWeb 2.0 [Main]",
       "logo": "PxWeb 2.0"
     },
+    "skip_to_main": "Gå direkt till huvudinnehållet",
     "footer": {
       "contact": {
         "title": "Kontakt",

diff --git a/packages/pxweb2/src/@types/resources.d.ts b/packages/pxweb2/src/@types/resources.d.ts
@@ -10,6 +10,7 @@ interface Resources {
         title: 'PxWeb 2.0 [Main]';
         logo: 'PxWeb 2.0';
       };
+      skip_to_main: 'Skip to main content';
       footer: {
         contact: {
           title: 'Contact';

diff --git a/packages/pxweb2/src/app/app.tsx b/packages/pxweb2/src/app/app.tsx
@@ -9,6 +9,7 @@ import { Header } from './components/Header/Header';
 import { NavigationItem } from './components/NavigationMenu/NavigationItem/NavigationItemType';
 import NavigationRail from './components/NavigationMenu/NavigationRail/NavigationRail';
 import NavigationBar from './components/NavigationMenu/NavigationBar/NavigationBar';
+import { SkipToMain } from './components/SkipToMain/SkipToMain';
 
 import { Footer } from './components/Footer/Footer';
 import { BreakpointsSmallMaxWidth } from '@pxweb2/pxweb2-ui';
@@ -64,6 +65,7 @@ export function App() {
 
   return (
     <>
+      <SkipToMain />
       {!isMobile && <Header />}{' '}
       <div className={styles.navigationAndContentContainer}>
         {!isMobile && (

diff --git a/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx b/packages/pxweb2/src/app/components/ContentTop/ContentTop.tsx
@@ -30,7 +30,7 @@ export function ContentTop({ pxtable, staticTitle }: ContenetTopProps) {
           <BodyLong>{staticTitle}</BodyLong>
         </div>
       </div>
-      <div className={cl(classes[`heading-information`])}>
+      <div id="px-main-content" className={cl(classes[`heading-information`])}>
         <Heading size="large">{pxtable.metadata.label}</Heading>
         <div className={cl(classes.information)}>
           <Button icon="InformationCircle" variant="secondary">

diff --git a/packages/pxweb2/src/app/components/SkipToMain/SkipToMain.module.scss b/packages/pxweb2/src/app/components/SkipToMain/SkipToMain.module.scss
@@ -0,0 +1,41 @@
+.skip-to-main {
+  &:focus-within {
+    display: flex;
+    background-color: var(--px-color-surface-inverted);
+    width: 100%;
+    height: 48px;
+    justify-content: center;
+  }
+}
+
+.skip-to-main a {
+  justify-content: center;
+  background-color: var(--px-color-surface-inverted);
+  color: var(--px-color-text-on-inverted);
+  height: 44px;
+
+  &:focus-visible {
+    outline-offset: -6px;
+    padding: 0px 12px;
+    box-shadow: none;
+  }
+
+  &:hover,
+  &:active {
+    background-color: var(--px-color-surface-inverted);
+    color: var(--px-color-text-on-inverted);
+  }
+}
+
+.screen-reader-only {
+  &:not(:focus-within) {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+}
diff --git a/packages/pxweb2/src/app/components/SkipToMain/SkipToMain.tsx b/packages/pxweb2/src/app/components/SkipToMain/SkipToMain.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import classes from './SkipToMain.module.scss';
+import cl from 'clsx';
+import { Link } from '@pxweb2/pxweb2-ui';
+import { useTranslation } from 'react-i18next';
+
+export const SkipToMain: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={cl(classes['skip-to-main'], classes['screen-reader-only'])}>
+      <Link href="#px-main-content" size="medium">
+        {t('common.skip_to_main')}
+      </Link>
+    </div>
+  );
+};