Merge pull request #298 from orangemug/fix/keyboard-accessible-buttons

Made buttons keyboard accessible

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>
   }
 }
 

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>

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;
 

src/styles/_input.scss

@@ -91,7 +91,6 @@
 
 .maputnik-button-selected {
   background-color: lighten($color-midgray, 12);
-  outline: 1px $color-white;
   color: white;
 }
 

src/styles/_toolbar.scss

@@ -57,6 +57,8 @@
 }
 
 .maputnik-toolbar-action {
+  background: inherit;
+  border-width: 0;
   @extend .maputnik-toolbar-link;
 }