Revert "Add <button> and focus styles for keyboard users" (#11089)

website/client/assets/scss/task.scss

@@ -291,30 +291,19 @@
 .habit-control {
   border-radius: 100px;
   color: $white;
-  display: flex;
-  flex-direction: column;
 
   .svg-icon {
     width: 10px;
     height: 10px;
-    margin: auto;
+    margin: 0 auto;
   }
-}
 
-.positive,
+  .positive {
-.negative {
+    margin-top: 9px;
-  align-items: center;
-  display: flex;
-
-  > svg {
-    margin: auto;
-    width: 10px;
   }
-}
 
-.negative {
+  .negative {
-  > svg {
+    margin-top: 13px;
-    height: 2px;
   }
 }
 

website/client/components/header/menu.vue

@@ -290,7 +290,6 @@ div
       margin-right: 24px;
     }
 
-    &:focus /deep/ .top-menu-icon.svg-icon, 
     &:hover /deep/ .top-menu-icon.svg-icon {
       color: $white;
     }

website/client/components/shops/shopItem.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 div
   .item-wrapper(@click="click()", :id="itemId")
-    button.item(:class="getItemClasses()")
+    .item(:class="getItemClasses()")
       slot(name="itemBadge", :item="item", :emptyItem="emptyItem")
 
       span.badge.badge-pill.badge-item.badge-clock(

website/client/components/snackbars/notification.vue

@@ -40,11 +40,6 @@ transition(name="fade")
     width: 300px;
     margin-left: 1em;
     margin-bottom: 1em;
-
-    .row {
-      margin: 0;
-      width: 100%;
-    }
   }
 
   .info {

website/client/components/tasks/task.vue

@@ -5,11 +5,11 @@
     .d-flex(:class="{'task-not-scoreable': isUser !== true}")
       // Habits left side control
       .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg")
-        button.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
+        .task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
           .svg-icon.positive(v-html="icons.positive")
       // Dailies and todos left side control
       .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg")
-        button.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
+        .task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
           .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
       // Task title, description and icons
       .task-content(:class="contentClass")
@@ -98,10 +98,10 @@
 
       // Habits right side control
       .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
-        button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
+        .task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
           .svg-icon.negative(v-html="icons.negative")
       // Rewards right side control
-      button.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
+      .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
         .svg-icon(v-html="icons.gold")
         .small-text {{task.value}}
     approval-footer(:task='task', v-if='this.task.group.id', :group='group')
@@ -180,15 +180,11 @@
   }
 
   .task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
-    background: $white;
-    border: 0;
-    border-radius: 0;
     opacity: 0;
     padding: 0 8px;
     transition: opacity 0.15s ease-in;
   }
 
-  .task /deep/ .habitica-menu-dropdown:focus .habitica-menu-dropdown-toggle,
   .task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
     opacity: 1;
   }
@@ -201,7 +197,6 @@
     }
   }
 
-  .task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:focus .svg-icon,
   .task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
     color: $purple-400 !important;
   }
@@ -422,13 +417,11 @@
   }
 
   .left-control {
-    align-items: center;
     border-top-left-radius: 2px;
     border-bottom-left-radius: 2px;
     min-height: 60px;
     border: 1px solid transparent;
     border-right: none;
-    flex-direction: row;
 
     & + .task-content {
       border-left: none;
@@ -446,14 +439,7 @@
   }
 
   .task-control:not(.task-disabled-habit-control-inner), .reward-control {
-    align-items: center;
     cursor: pointer;
-    margin: 0;
-    padding: 0;
-  }
-
-  .task-control {
-    border: none;
   }
 
   .task-not-scoreable {

website/client/components/ui/customMenuDropdown.vue

@@ -3,7 +3,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 -->
 
 <template lang="pug">
-.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", @keypress.enter.space.stop.prevent="toggleDropdown()", role="button", tabindex="0", :class="{open: isOpen}", :aria-pressed="isPressed")
+.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}")
   .habitica-menu-dropdown-toggle
     slot(name="dropdown-toggle")
   .dropdown-menu(:class="{'dropdown-menu-right': right}")
@@ -12,27 +12,12 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 
 <style lang="scss">
 @import '~client/assets/scss/colors.scss';
-.habitica-menu-dropdown {
-  &:hover,
-  &:focus { // NB focus styles match the hover styles for .svg-icon
-    outline: none;
-  }
-}
 
 .habitica-menu-dropdown.open {
   .habitica-menu-dropdown-toggle .svg-icon {
     color: $white !important;
   }
 }
-
-// Firefox outline fix for dropdown menu
-@supports (-moz-appearance:meterbar) and (all:initial) {
-  .habitica-menu-dropdown.open {
-    &:focus {
-      outline: none;
-    }
-  }
-}
 </style>
 <style lang='scss' scoped>
 @import '~client/assets/scss/colors.scss';
@@ -81,9 +66,6 @@ export default {
       if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
       return this.isDropdownOpen;
     },
-    isPressed () {
-      return this.isOpen ? 'true' : 'false';
-    },
   },
   mounted () {
     document.documentElement.addEventListener('click', this._clickOutListener);