Merge pull request #121 from VioletRose/settings-page-tab-navigation

Settings page a11y - enabled tab navigation to switches

src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass

@@ -1,7 +1,24 @@
 /* Thanks to Guus Lieben for the Material Design Switch */
 
+.switch-ctn
+  margin: 20px 16px
+  position: relative
+
+  &.compact
+    margin: 0
+
 .switch-input
-  display: none
+  -moz-appearance: none
+  -webkit-appearance: none
+  appearance: none
+  height: 20px
+  left: -3px
+  position: absolute
+  top: calc(50% - 3px)
+  -ms-transform: translate(0, (-50%))
+  -webkit-transform: translate(0, -50%)
+  transform: translate(0, -50%)
+  width: 34px
 
 .switch-label
   position: relative
@@ -10,12 +27,7 @@
   cursor: pointer
   font-weight: 500
   text-align: left
-  margin: 16px
-  padding: 16px 0 16px 44px
-
-  &.compact
-    margin: 0px
-    padding: 12px 0 12px 44px
+  padding: 12px 0 12px 44px
 
   &:before, &:after
     content: ""

src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>
+  <div
+    class="switch-ctn"
+    :class="{compact}"
+  >
     <input
       :id="id"
       v-model="currentValue"
@@ -12,7 +15,6 @@
     <label
       :for="id"
       class="switch-label"
-      :class="{compact}"
     >
       {{ label }}
     </label>