1 files changed, 16 insertions, 10 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index edff2e67b20..4c7b8e8f667 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -223,25 +223,31 @@ export default {
 
 <template>
   <div class="content js-line-expansion-content">
-    <a
-      v-if="canExpandDown"
-      class="gl-mx-2 gl-cursor-pointer js-unfold-down gl-display-inline-block gl-py-4"
+    <button
+      type="button"
+      :disabled="!canExpandDown"
+      class="js-unfold-down gl-mx-2 gl-py-4 gl-cursor-pointer"
       @click="handleExpandLines(EXPAND_DOWN)"
     >
       <gl-icon :size="12" name="expand-down" />
       <span>{{ $options.i18n.showMore }}</span>
-    </a>
-    <a class="gl-mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
+    </button>
+    <button
+      type="button"
+      class="js-unfold-all gl-mx-2 gl-py-4 gl-cursor-pointer"
+      @click="handleExpandLines()"
+    >
       <gl-icon :size="12" name="expand" />
       <span>{{ $options.i18n.showAll }}</span>
-    </a>
-    <a
-      v-if="canExpandUp"
-      class="gl-mx-2 gl-cursor-pointer js-unfold gl-display-inline-block gl-py-4"
+    </button>
+    <button
+      type="button"
+      :disabled="!canExpandUp"
+      class="js-unfold gl-mx-2 gl-py-4 gl-cursor-pointer"
       @click="handleExpandLines(EXPAND_UP)"
     >
       <gl-icon :size="12" name="expand-up" />
       <span>{{ $options.i18n.showMore }}</span>
-    </a>
+    </button>
   </div>
 </template>