Hds 1672 skip link

packages/react/src/components/header/Header.stories.tsx

@@ -190,3 +190,37 @@ export const Minimal = (args) => {
     </Header>
   );
 };
+
+export const WithSkipLink = (args) => {
+  return (
+    <Header {...args} onDidChangeLanguage={languageChangedAction}>
+      <Header.SkipLink skipTo="#content" label="Skip To Content" />
+      <Header.ActionBar
+        title="Helsingin kaupunki"
+        titleAriaLabel="Helsingin kaupunki"
+        titleUrl="https://hel.fi"
+        titleStyle={TitleStyleType.black}
+      >
+        <Header.NavigationLanguageSelector languages={languages}>
+          <h3>Tietoa muilla kielillä</h3>
+          <Link external href="www.example.com">
+            Selkosuomi
+          </Link>
+          <Link external href="www.example.com">
+            Viittomakieli
+          </Link>
+        </Header.NavigationLanguageSelector>
+
+        <Header.ActionBarItem label="Kirjaudu" icon={IconUser} style={{ order: 10 }} id="action-bar-login">
+          <h3>Kirjautumisvalinnat</h3>
+        </Header.ActionBarItem>
+      </Header.ActionBar>
+
+      <Header.NavigationMenu>
+        <Header.NavigationLink href="#" label="Link 1" />
+        <Header.NavigationLink href="#" label="Link 2" />
+        <Header.NavigationLink href="#" label="Link 3" />
+      </Header.NavigationMenu>
+    </Header>
+  );
+};

packages/react/src/components/header/Header.tsx

@@ -9,6 +9,7 @@ import { NavigationLink } from './components/navigationLink';
 import { HeaderActionBarItemWithDropdown } from './components/headerActionBarItem';
 import { NavigationLanguageSelector } from './components/navigationLanguageSelector';
 import { NavigationSearch } from './components/navigationSearch';
+import { SkipLink } from './components/skipLink';
 import { LanguageProvider, LanguageProviderProps } from '../../context/languageContext';
 // import base styles
 import '../../styles/base.css';
@@ -51,6 +52,7 @@ interface HeaderInterface extends FC<HeaderProps> {
   NavigationLink: typeof NavigationLink;
   NavigationLanguageSelector: typeof NavigationLanguageSelector;
   NavigationSearch: typeof NavigationSearch;
+  SkipLink: typeof SkipLink;
 }
 
 export const Header: HeaderInterface = ({
@@ -76,3 +78,4 @@ Header.NavigationLink = NavigationLink;
 
 Header.NavigationLanguageSelector = NavigationLanguageSelector;
 Header.NavigationSearch = NavigationSearch;
+Header.SkipLink = SkipLink;

packages/react/src/components/header/components/skipLink/SkipLink.module.scss

@@ -0,0 +1,54 @@
+@use "../../../../styles/layout.scss";
+
+.skipLink {
+  --background-color: var(--color-white);
+  --height: 66px;
+  --inner-outer-spacing: 6px;
+  --outline-color: var(--color-focus-outline);
+  --outline-inner-color: var(--color-black-90);
+  --outline-width: 3px;
+  --text-color: var(--color-black-90);
+  --top: 10px;
+  --width: 213px;
+
+  @include layout.below-large {
+    --top: 2px;
+  }
+
+  @include layout.below-medium {
+    --height: 60px;
+  }
+
+  display: flex;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  top: calc(-1 * (var(--height) + var(--top)));
+
+  &:focus {
+    align-items: center;
+    background-color: var(--background-color);
+    font-family: var(--font-default);
+    font-weight: 500;
+    height: var(--height);
+    justify-content: center;
+    left: 15px;
+    outline: var(--outline-color) solid var(--outline-width);
+    text-decoration: none;
+    top: var(--top);
+    transition: all 0.15s ease-in;
+    width: var(--width);
+    z-index: 99;  
+
+    & > .skipLinkLabel {
+      align-items: center;
+      color: var(--text-color);
+      display: flex;
+      height: calc(var(--height) - 2 * var(--inner-outer-spacing));
+      justify-content: center;
+      outline: var(--outline-inner-color) solid var(--outline-width);
+      width: calc(var(--width) - 2 * var(--inner-outer-spacing));    
+    }
+  }
+
+}

packages/react/src/components/header/components/skipLink/SkipLink.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { SkipLink } from './SkipLink';
+
+describe('<SkipToContentLink /> spec', () => {
+  it('renders the component', () => {
+    const { asFragment } = render(<SkipLink skipTo="content" label="skip to content" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('it should show link when tab is pressed', () => {
+    const { asFragment, getByText } = render(<SkipLink skipTo="content" label="skip to content" />);
+    userEvent.tab();
+    expect(asFragment()).toMatchSnapshot();
+    expect(getByText(/skip to content/)).toBeVisible();
+  });
+});

packages/react/src/components/header/components/skipLink/SkipLink.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+// import core base styles
+import '../../../../styles/base.css';
+import styles from './SkipLink.module.scss';
+
+export type SkipLinkProps = {
+  /**
+   * ID of the element which is reached by clicking "skip link" shortcut
+   */
+  skipTo: string;
+  /**
+   * Label for skip link shortcut
+   */
+  label: string;
+  /**
+   * Aria label for skip link shortcut (alternative text for screen reader)
+   */
+  ariaLabel?: string;
+};
+export const SkipLink = ({ skipTo, label, ariaLabel }: SkipLinkProps) => {
+  const href = skipTo.startsWith('#') ? skipTo : `#${skipTo}`;
+
+  return (
+    <a href={href} aria-label={ariaLabel} className={styles.skipLink}>
+      <span className={styles.skipLinkLabel}>{label}</span>
+    </a>
+  );
+};

packages/react/src/components/header/components/skipLink/__snapshots__/SkipLink.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SkipToContentLink /> spec it should show link when tab is pressed 1`] = `
+<DocumentFragment>
+  <a
+    class="skipLink"
+    href="#content"
+  >
+    <span
+      class="skipLinkLabel"
+    >
+      skip to content
+    </span>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`<SkipToContentLink /> spec renders the component 1`] = `
+<DocumentFragment>
+  <a
+    class="skipLink"
+    href="#content"
+  >
+    <span
+      class="skipLinkLabel"
+    >
+      skip to content
+    </span>
+  </a>
+</DocumentFragment>
+`;

packages/react/src/components/header/components/skipLink/index.ts

@@ -0,0 +1 @@
+export * from './SkipLink';

site/src/docs/components/header/index.mdx

@@ -32,7 +32,7 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 - The only mandatory component inside the header is HeaderActionBar. Other components may be used if needed.
 - HeaderNavigationBar is coming soon
 - HeaderActionBar is coming soon
-- The inner components should **always** be in this order: Header.UniversalBar, HeaderActionBar and HeaderNavigationBar.
+- The inner components should **always** be in this order: Header.SkipLink, Header.UniversalBar, HeaderActionBar and HeaderNavigationBar.
 
 ### Variations
 
@@ -63,3 +63,9 @@ Coming soon!
 #### With navigation bar
 
 Coming soon!
+
+#### With skip link
+
+- Using the Header.SkipLink component is optional. Use the skip link component to help keyboard-only users skip to the main content on a page.
+- See Example for Header.SkipLink <Link openInNewTab openInNewTabAriaLabel="Opens in a new tab" href="/storybook/react/?path=/story/components-header--with-skip-link">in Storybook</Link>
+- The Header.SkipLink supports ariaLabel which gives possibility to define more informative text for screen readers