From 29b839589c04cb44506b0113a3b7d70416c36847 Mon Sep 17 00:00:00 2001
From: Thibaut Courouble <thibaut@me.com>
Date: Sun, 5 Mar 2017 11:51:27 -0500
Subject: [PATCH] Use <button> instead of <a> for mobile settings tabs

---
 assets/javascripts/views/layout/mobile.coffee |  4 ++--
 assets/stylesheets/components/_content.scss   |  1 -
 assets/stylesheets/components/_settings.scss  | 11 ++---------
 views/app.erb                                 |  2 +-
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/assets/javascripts/views/layout/mobile.coffee b/assets/javascripts/views/layout/mobile.coffee
index 8706eae6..041f8c48 100644
--- a/assets/javascripts/views/layout/mobile.coffee
+++ b/assets/javascripts/views/layout/mobile.coffee
@@ -49,11 +49,11 @@ class app.views.Mobile extends app.View
     @forward.removeAttribute('hidden')
     $.on @forward, 'click', @onClickForward
 
-    @docPickerTab = $('a[data-tab="doc-picker"]')
+    @docPickerTab = $('button[data-tab="doc-picker"]')
     @docPickerTab.removeAttribute('hidden')
     $.on @docPickerTab, 'click', @onClickDocPickerTab
 
-    @settingsTab = $('a[data-tab="settings"]')
+    @settingsTab = $('button[data-tab="settings"]')
     @settingsTab.removeAttribute('hidden')
     $.on @settingsTab, 'click', @onClickSettingsTab
 
diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
index bc83f175..9fd6dae8 100644
--- a/assets/stylesheets/components/_content.scss
+++ b/assets/stylesheets/components/_content.scss
@@ -406,7 +406,6 @@
   line-height: inherit;
   color: $linkColor;
   text-decoration: $linkTextDecoration;
-  cursor: pointer;
 
   &:hover {
     color: $linkColorHover;
diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss
index 3fc1cb6b..d7fcb6ce 100644
--- a/assets/stylesheets/components/_settings.scss
+++ b/assets/stylesheets/components/_settings.scss
@@ -123,25 +123,18 @@
 ._settings-tabs {
   display: none; // mobile only
   margin-right: .5rem;
-  line-height: $headerHeight;
 }
 
 ._settings-tab {
   position: relative;
-  display: inline-block;
   vertical-align: top;
   padding: 0 .75rem;
-  cursor: pointer;
-
-  &, &:hover {
-    color: $textColorLight;
-    text-decoration: none;
-  }
+  line-height: $headerHeight;
+  color: $textColorLight;
 
   &.active {
     color: $textColor;
     font-weight: $boldFontWeight;
-    text-decoration: none;
     box-shadow: inset 0 -2px $linkColor;
   }
 }
diff --git a/views/app.erb b/views/app.erb
index 1836046e..534d7023 100644
--- a/views/app.erb
+++ b/views/app.erb
@@ -44,7 +44,7 @@
         <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg> Back
       </button>
       <nav class="_settings-tabs">
-        <a class="_settings-tab active" data-tab="doc-picker" hidden>Docs</a><a class="_settings-tab" data-tab="settings" hidden>Settings</a>
+        <button type="button" class="_settings-tab active" data-tab="doc-picker" hidden>Docs</button><button type="button" class="_settings-tab" data-tab="settings" hidden>Settings</button>
       </nav>
     </div>
     <div class="_sidebar">