Merge pull request #309 from orangemug/feature/skip-menu

Added skip-menu link for keyboard users
maplibre · May 28, 2018 · 0f103c3 · 0f103c3
2 parents 54c7944 + 272f662
commit 0f103c3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git 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 navigation
+          </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
@@ -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
@@ -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%;
+  }
+}
+