From 11d73595fcea7c290e4bbdea205d641208036aed Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 10 May 2018 16:50:37 +0100
Subject: [PATCH] Made buttons keyboard accessible.

---
 src/components/Toolbar.jsx          | 4 ++--
 src/components/layers/LayerList.jsx | 8 ++++----
 src/styles/_components.scss         | 1 +
 src/styles/_input.scss              | 1 -
 src/styles/_toolbar.scss            | 2 ++
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index efe47f6..caa1c5e 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -63,13 +63,13 @@ class ToolbarAction extends React.Component {
   }
 
   render() {
-    return <a
+    return <button
       className='maputnik-toolbar-action'
       data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
     >
       {this.props.children}
-    </a>
+    </button>
   }
 }
 
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index d0706ff..a9b144f 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -208,21 +208,21 @@ class LayerListContainer extends React.Component {
         <span className="maputnik-space" />
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
-            <a 
+            <button
               onClick={this.toggleLayers.bind(this)}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
-            </a>
+            </button>
           </div>
         </div>
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
-            <a
+            <button
               onClick={this.toggleModal.bind(this, 'add')}
               data-wd-key="layer-list:add-layer"
               className="maputnik-button maputnik-button-selected">
              Add Layer
-            </a>
+            </button>
           </div>
         </div>
       </header>
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 6ac5ce5..048307d 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -53,6 +53,7 @@
   font-size: $font-size-6;
   padding: $margin-2;
   user-select: none;
+  border-width: 0;
   border-radius: 2px;
   box-sizing: border-box;
 
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 89bbded..199fa36 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -91,7 +91,6 @@
 
 .maputnik-button-selected {
   background-color: lighten($color-midgray, 12);
-  outline: 1px $color-white;
   color: white;
 }
 
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index a76c708..b02c31f 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -57,6 +57,8 @@
 }
 
 .maputnik-toolbar-action {
+  background: inherit;
+  border-width: 0;
   @extend .maputnik-toolbar-link;
 }