From a82ba26f861096201aa3cfe4e44342d62330980a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 28 May 2018 10:50:19 +0100
Subject: [PATCH 1/2] Added skip-menu link for keyboard users.

---
 src/components/Toolbar.jsx          |  4 ++++
 src/components/layers/LayerList.jsx |  1 +
 src/styles/_toolbar.scss            | 22 ++++++++++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index caa1c5e8f..7d24d7486 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -135,9 +135,13 @@ export default class Toolbar extends React.Component {
       />
       <div className="maputnik-toolbar__inner">
         <ToolbarLink
+          tabIndex="2"
           href={"https://github.com/maputnik/editor"}
           className="maputnik-toolbar-logo"
         >
+          <a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
+            Skip the menu
+          </a>
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik
             <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index a9b144fb7..0bbd2abb8 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -209,6 +209,7 @@ class LayerListContainer extends React.Component {
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
             <button
+              id="skip-menu"
               onClick={this.toggleLayers.bind(this)}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index b02c31f74..d2c9513c1 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -16,6 +16,8 @@
   background-color: $color-black;
   padding: $margin-2;
   height: $toolbar-height;
+  position: relative;
+  overflow: hidden;
 
   h1 {
     display: inline;
@@ -80,3 +82,23 @@
   flex: 1;
   overflow-y: auto;
 }
+
+.maputnik-toolbar-skip {
+  position: absolute;
+  overflow: hidden;
+  width: 0px;
+  height: 100%;
+  text-align: center;
+  display: block;
+  background-color: $color-black;
+  z-index: 999;
+  line-height: 40px;
+  left: 0;
+  top: 0;
+
+  &:active,
+  &:focus {
+    width: 100%;
+  }
+}
+

From 272f662a341946e6bcfa8d201a136d19139de1c8 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 28 May 2018 11:29:49 +0100
Subject: [PATCH 2/2] Changed 'skip' wording

As outlined in <https://webaim.org/techniques/skipnav/>
---
 src/components/Toolbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 7d24d7486..f53996a73 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -140,7 +140,7 @@ export default class Toolbar extends React.Component {
           className="maputnik-toolbar-logo"
         >
           <a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
-            Skip the menu
+            Skip navigation
           </a>
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik