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,6 +57,13 @@
 </script>
 
 <style scoped lang="scss">
+  @import '~@/scss/vars.scss';
+  .dropdown-wrapper {
+    .dropdown-selector {
+      margin: 0;
+      padding: $default-padding * 0.5;
+    }
+
     .dropdown-list {
       list-style-type: none;
       background-color: #ffffff;
@@ -63,14 +76,8 @@
       box-shadow: 2px 2px 5px lightgrey;
       width: auto !important;
 
-    li {
-      padding: 3px 8px;
-    }
-  }
-
       .dropdown-item {
-    cursor: pointer;
+        padding: 3px 12px;
-
         &.selected {
           font-weight: bold;
         }
@@ -83,4 +90,6 @@
           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,13 +214,16 @@
       }
       .nav-item {
         padding: 0 10px;
-
+        &.dropdown-wrapper {
+          padding: 0;
+          margin-left: 2px;
           ::v-deep(.dropdown-list) {
             z-index: 1000;
-          margin-left: -160px !important;
+            margin-left: -150px !important;
             width: 180px !important;
           }
         }
+      }
 
       .nav-link {
         color: var(--app-a-color);
@@ -330,12 +334,14 @@
 
         .nav-item {
           padding: 7px 25px;
-
+          &.dropdown-wrapper {
+            padding-left: 15px;
             ::v-deep(.dropdown-list) {
               margin-left: initial !important;
               width: auto !important;
             }
           }
+        }
 
         .nav-profile-img {
           display: none;