Implements skip link for navigation

entry_types/scrolled/config/locales/new/de.yml

@@ -227,6 +227,8 @@ de:
         tr: Türkisch
         unknown: "(Unbekannt)"
         zh: Chinesisch
+      navigation_skip_links:
+        content: Zum Inhalt
     inline_editing:
       cancel: Abbrechen
       url_placeholder: URL eingeben oder einfügen

entry_types/scrolled/config/locales/new/en.yml

@@ -141,6 +141,8 @@ en:
         tr: Turkish
         unknown: "(Unknown)"
         zh: Chinese
+      navigation_skip_links:
+        content: To the content
     inline_editing:
       cancel: Cancel
       url_placeholder: Type or paste URL

entry_types/scrolled/package/spec/frontend/SkipLinks-spec.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {SkipLinks} from 'frontend/navigation/SkipLinks';
+import styles from 'frontend/navigation/SkipLinks.module.css';
+
+import {render} from '@testing-library/react';
+
+describe('SkipLinks', () => {
+  it('renders skip links', async () => {
+    const {getByText} = render(<SkipLinks />);
+
+    expect(getByText(/content/).classList.contains(styles.link)).toBe(true);
+  });
+
+  it('focus the button', async () => {
+    const {container} = render(<SkipLinks />);
+
+    const elem = document.getElementsByClassName(styles.link)[0];
+    elem.focus();
+
+    expect(document.activeElement).toBe(elem);
+  });
+});

entry_types/scrolled/package/src/frontend/Entry.js

@@ -43,7 +43,7 @@ export default withInlineEditingDecorator('EntryDecorator', function Entry(props
   }
 
   return (
-    <div className={styles.Entry}>
+    <div className={styles.Entry} id='goToContent'>
       <AtmoProvider>
         <ScrollToSectionContext.Provider value={scrollToSection}>
           {renderChapters(entryStructure,

entry_types/scrolled/package/src/frontend/navigation/AppHeader.js

@@ -10,6 +10,7 @@ import {LegalInfoMenu} from "./LegalInfoMenu";
 import {SharingMenu} from "./SharingMenu";
 import {ToggleMuteButton} from './ToggleMuteButton';
 import {Logo} from './Logo';
+import {SkipLinks} from './SkipLinks';
 
 import styles from './AppHeader.module.css';
 
@@ -90,6 +91,7 @@ export function AppHeader(props) {
         <HamburgerIcon onClick={handleBurgerMenuClick}
                        mobileNavHidden={mobileNavHidden}/>
 
+        <SkipLinks />
         <Logo />
 
         <nav className={classNames(styles.navigationChapters, {[styles.navigationChaptersHidden]: mobileNavHidden})}

entry_types/scrolled/package/src/frontend/navigation/SkipLinks.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import I18n from 'i18n-js';
+
+import styles from './SkipLinks.module.css';
+
+export function SkipLinks() {
+
+  function scrollDown() {
+    setTimeout(() => {
+      window.scrollTo(0, 50);
+    }, 50);
+  }
+
+  return (
+    <div id='skipLinks'>
+      <a href='#goToContent' className={styles.link} onClick={scrollDown}>
+        {I18n.t('pageflow_scrolled.public.navigation_skip_links.content')}
+      </a>
+    </div>
+  );
+}

entry_types/scrolled/package/src/frontend/navigation/SkipLinks.module.css

@@ -0,0 +1,20 @@
+.link {
+  position: absolute;
+  z-index: 10000;
+  top: -1000em;
+  left: -1000em;
+
+  display: block;
+  border: 1px solid #eeeeee;
+  border-radius: 5px;
+  padding: 5px 5px;
+  background: #00375a;
+  text-align: center;
+  line-height: 25px;
+  color: #ffffff;
+}
+
+.link:focus {
+  left: 13.8%;
+  top: 13%;
+}