feat: add dnb-skip-link support in core style with info under the "…

…focus" docs
dnbexperience · Feb 1, 2019 · 333f257 · 333f257
1 parent e19c1ce
commit 333f257
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 8 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/focus.md
@@ -28,6 +28,8 @@ From the technical side, we have to assign an _invisible_ focus, so the user can
 The `dnb-ui-lib` has an build in helper, to manage basic focus handling.
 This helper also handles both the `tabindex="-1"` and the `class="dnb-no-focus"` situation.
 
+### Focus helper
+
 ```js
 import {
   setPageFocusElement,
@@ -48,3 +50,34 @@ applyPageFocus('MyCustomName')
 - also set the focus back to the content, once the menu or navigation area gets closed.
 
 A more complex focus management is build in already to the [Modal Component](/uilib/components/modal). There we actually also disable focus possibility on the content behind, so the user only can navigate inside the modal.
+
+### Skip Link
+
+The `dnb-ui-lib` also has a small setup for a [skip link](https://www.w3.org/TR/WCAG20-TECHS/G1.html)
+
+Our solution is CSS only and should work for all kinds of App setups.
+Place an Anchor like this one blow, on the very top of Your App content:
+
+<!-- prettier-ignore-start -->
+```html
+<a class="dnb-skip-link dnb-button" href="#dnb-app-content">Skip to content</a>
+```
+<!-- prettier-ignore-end -->
+
+Also, place a `id="dnb-app-content"` on Your content wrapper:
+
+<!-- prettier-ignore-start -->
+```html
+<body>
+    <a class="dnb-skip-link dnb-button" href="#dnb-app-content">Skip to content</a>
+    <header>
+        <nav>
+            <!-- Nav links to skip -->
+        </nav>
+    </header>
+    <main id="dnb-app-content">
+        <!-- Content goes here -->
+    </main>
+</body>
+```
+<!-- prettier-ignore-end -->
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -443,7 +443,7 @@ export default class SidebarLayout extends PureComponent {
                     {isOpen && (
                       <Global
                         styles={css`
-                          .dnb-page-content {
+                          .dnb-app-content {
                             display: none !important;
                           }
                         `}

diff --git a/packages/dnb-design-system-portal/src/shared/menu/ToggleGrid.js b/packages/dnb-design-system-portal/src/shared/menu/ToggleGrid.js
@@ -69,7 +69,7 @@ export default class ToggleGrid extends Component {
   }
   showGrid = showGrid => {
     if (typeof document !== 'undefined') {
-      const page = document.querySelector('.dnb-page-content')
+      const page = document.querySelector('.dnb-app-content')
       if (page) {
         if (showGrid) {
           page.classList.add('dev-grid')

diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -13,6 +13,7 @@ import Sidebar from '../menu/SidebarMenu'
 import StickyMenuBar from '../menu/StickyMenuBar'
 import { markdownStyle } from './Markdown'
 import styled from '@emotion/styled'
+import { css, Global } from '@emotion/core'
 import classnames from 'classnames'
 import { buildVersion } from '../../../package.json'
 import { MainMenuProvider } from '../menu/MainMenuContext'
@@ -25,7 +26,7 @@ class Layout extends PureComponent {
   }
   componentDidMount() {
     // gets aplyed on "onRouteUpdate"
-    setPageFocusElement('.dnb-page-content h1:nth-of-type(1)', 'content')
+    setPageFocusElement('.dnb-app-content h1:nth-of-type(1)', 'content')
   }
   render() {
     const { children, location } = this.props
@@ -36,7 +37,7 @@ class Layout extends PureComponent {
           {/* Load the StickyMenuBar to make use of the grid demo */}
           <StickyMenuBar preventBarVisibility={true} />
           <Content className="fullscreen-page">
-            <MaxWidth className="dnb-page-content-inner">
+            <MaxWidth className="dnb-app-content-inner">
               {children}
             </MaxWidth>
           </Content>
@@ -48,12 +49,16 @@ class Layout extends PureComponent {
     return (
       <MainMenuProvider>
         <SidebarMenuProvider>
+          <Global styles={globalStyles} />
+          <a className="dnb-skip-link dnb-button" href="#dnb-app-content">
+            Skip to content
+          </a>
           <MainMenu enableOverlay />
           <StickyMenuBar />
           <Wrapper className="content-wrapper">
             <Sidebar location={location} showAll={false} />
             <Content>
-              <MaxWidth className="dnb-page-content-inner">
+              <MaxWidth className="dnb-app-content-inner">
                 {children}
                 <Footer />
               </MaxWidth>
@@ -67,6 +72,14 @@ class Layout extends PureComponent {
 
 export default Layout
 
+const globalStyles = css`
+  @media (max-width: 40em) {
+    a.dnb-skip-link {
+      display: none;
+    }
+  }
+`
+
 const Wrapper = styled.div`
   position: relative;
   z-index: 2;
@@ -82,9 +95,10 @@ const Wrapper = styled.div`
 const Content = ({ className, children }) => (
   <Main
     tabIndex="-1"
+    id="dnb-app-content"
     className={classnames(
       'dnb-style',
-      'dnb-page-content',
+      'dnb-app-content',
       'dnb-no-focus',
       className
     )}
@@ -121,7 +135,7 @@ const Main = styled.main`
     height of StickyMenuBar - 1px border */
   padding-top: 4rem;
 
-  .dnb-page-content-inner {
+  .dnb-app-content-inner {
     display: flex;
     flex-direction: column;
     justify-content: space-between;

diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss
@@ -44,13 +44,37 @@ html[data-whatinput='keyboard'] .dnb-style *:not(a):not(div):focus {
   }
 }
 
+// How to use the "skip-link"
+// 1. Have this on the top of Your App: <a class="dnb-skip-link dnb-button" href="#dnb-app-content">Skip to content</a>
+// 2. Place this id="dnb-app-content" on Your main content container
+a.dnb-skip-link {
+  position: fixed;
+  z-index: -9999;
+  top: -100vh;
+  overflow: hidden;
+}
+a.dnb-skip-link:focus,
+a.dnb-skip-link:active {
+  z-index: 9999;
+  top: auto;
+  width: auto;
+
+  margin: 1rem 45vw;
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  @include allBelow(small) {
+    margin: 1rem 35%;
+  }
+}
+
 // Layout management
 // Use this class where components are trying to add background boxes/borders/lines
 // to the very outer sides of the page
 // e.g. Tabs are using this technique
 // In some cases we dont want to have that effect.
 // E.g. if we have a menu to the left or right side
-.dnb-page-content-inner {
+.dnb-app-content-inner {
   overflow: hidden;
 }