moved keycodes constants to common lib file

updated markup to use buttons instead of links

app/assets/javascripts/ide/components/file_finder/index.vue

@@ -8,11 +8,13 @@ import {
   MAX_FILE_FINDER_RESULTS,
   FILE_FINDER_ROW_HEIGHT,
   FILE_FINDER_EMPTY_ROW_HEIGHT,
+} from '../../constants';
+import {
   UP_KEY_CODE,
   DOWN_KEY_CODE,
   ENTER_KEY_CODE,
   ESC_KEY_CODE,
-} from '../../constants';
+} from '../../../lib/utils/keycodes';
 
 export default {
   components: {
@@ -191,7 +193,7 @@ export default {
         ></i>
         <i
           role="button"
-          aria-hidden="true"
+          :aria-label="__('Clear search input')"
           class="fa fa-times dropdown-input-clear"
           :class="{
             show: showClearInputButton
@@ -225,16 +227,16 @@ export default {
           </template>
           <li
             v-else
-            class="dropdown-menu-empty-itemhidden"
+            class="dropdown-menu-empty-item"
           >
-            <a href="#">
+            <div class="append-right-default prepend-left-default prepend-top-8 append-bottom-8">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>
               <template v-else>
                 {{ __('No files found.') }}
               </template>
-            </a>
+            </div>
           </li>
         </virtual-list>
       </div>

app/assets/javascripts/ide/components/file_finder/item.vue

@@ -58,8 +58,8 @@ export default {
 </script>
 
 <template>
-  <a
-    href="#"
+  <button
+    type="button"
     class="diff-changed-file"
     :class="{
       'is-focused': focused,
@@ -109,5 +109,5 @@ export default {
         :file="file"
       />
     </span>
-  </a>
+  </button>
 </template>

app/assets/javascripts/ide/constants.js

@@ -2,10 +2,6 @@
 export const MAX_FILE_FINDER_RESULTS = 40;
 export const FILE_FINDER_ROW_HEIGHT = 55;
 export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33;
-export const UP_KEY_CODE = 38;
-export const DOWN_KEY_CODE = 40;
-export const ENTER_KEY_CODE = 13;
-export const ESC_KEY_CODE = 27;
 
 // Commit message textarea
 export const MAX_TITLE_LENGTH = 50;

app/assets/javascripts/lib/utils/keycodes.js

@@ -0,0 +1,4 @@
+export const UP_KEY_CODE = 38;
+export const DOWN_KEY_CODE = 40;
+export const ENTER_KEY_CODE = 13;
+export const ESC_KEY_CODE = 27;

app/assets/stylesheets/framework/common.scss

@@ -472,6 +472,7 @@ img.emoji {
 .append-right-20 { margin-right: 20px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-5 { margin-bottom: 5px; }
+.append-bottom-8 { margin-bottom: $grid-size; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }

spec/javascripts/ide/components/file_finder/index_spec.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import store from '~/ide/stores';
 import FindFileComponent from '~/ide/components/file_finder/index.vue';
-import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/ide/constants';
+import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import router from '~/ide/ide_router';
 import { file, resetStore } from '../../helpers';
 import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper';