Client - make language dropdown keyboard-navigable

fittrackee_client/src/components/Common/Dropdown.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="dropdown-wrapper">
-    <div class="dropdown-selected" @click="toggleDropdown">
+    <button
+      :aria-expanded="isOpen"
+      class="dropdown-selector transparent"
+      @click="toggleDropdown"
+    >
       <slot></slot>
-    </div>
+    </button>
     <ul class="dropdown-list" v-if="isOpen">
       <li
         class="dropdown-item"
         :class="{ selected: option.value === selected }"
         v-for="(option, index) in dropdownOptions"
         :key="index"
+        tabindex="0"
         @click="updateSelected(option)"
+        @keydown.enter="updateSelected(option)"
       >
         {{ option.label }}
       </li>
@@ -51,36 +57,39 @@
 </script>
 
 <style scoped lang="scss">
-  .dropdown-list {
+  @import '~@/scss/vars.scss';
-    list-style-type: none;
+  .dropdown-wrapper {
-    background-color: #ffffff;
+    .dropdown-selector {
-    padding: 0 !important;
+      margin: 0;
-    margin-top: 5px;
+      padding: $default-padding * 0.5;
-    margin-left: -20px !important;
-    position: absolute;
-    text-align: left;
-    border: solid 1px lightgrey;
-    box-shadow: 2px 2px 5px lightgrey;
-    width: auto !important;
-
-    li {
-      padding: 3px 8px;
-    }
-  }
-
-  .dropdown-item {
-    cursor: pointer;
-
-    &.selected {
-      font-weight: bold;
     }
 
-    &.selected::after {
+    .dropdown-list {
-      content: ' ✔';
+      list-style-type: none;
-    }
+      background-color: #ffffff;
+      padding: 0 !important;
+      margin-top: 5px;
+      margin-left: -20px !important;
+      position: absolute;
+      text-align: left;
+      border: solid 1px lightgrey;
+      box-shadow: 2px 2px 5px lightgrey;
+      width: auto !important;
 
-    &:hover {
+      .dropdown-item {
-      background-color: var(--dropdown-hover-color);
+        padding: 3px 12px;
+        &.selected {
+          font-weight: bold;
+        }
+
+        &.selected::after {
+          content: ' ✔';
+        }
+
+        &:hover {
+          background-color: var(--dropdown-hover-color);
+        }
+      }
     }
   }
 </style>

fittrackee_client/src/components/NavBar.vue

@@ -175,6 +175,7 @@
       font-size: 1.2em;
       font-weight: bold;
       margin-right: 10px;
+      line-height: 1.6em;
     }
 
     .fa {
@@ -194,7 +195,7 @@
       display: flex;
       flex: 1;
       justify-content: space-between;
-      line-height: 1.8em;
+      line-height: 2em;
       width: 100%;
 
       .nav-items-close {
@@ -213,11 +214,14 @@
       }
       .nav-item {
         padding: 0 10px;
-
+        &.dropdown-wrapper {
-        ::v-deep(.dropdown-list) {
+          padding: 0;
-          z-index: 1000;
+          margin-left: 2px;
-          margin-left: -160px !important;
+          ::v-deep(.dropdown-list) {
-          width: 180px !important;
+            z-index: 1000;
+            margin-left: -150px !important;
+            width: 180px !important;
+          }
         }
       }
 
@@ -330,10 +334,12 @@
 
         .nav-item {
           padding: 7px 25px;
-
+          &.dropdown-wrapper {
-          ::v-deep(.dropdown-list) {
+            padding-left: 15px;
-            margin-left: initial !important;
+            ::v-deep(.dropdown-list) {
-            width: auto !important;
+              margin-left: initial !important;
+              width: auto !important;
+            }
           }
         }