Make close/changed icon more accessible

Fix
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12198#note_37143527

1 files changed, 17 insertions, 2 deletions

diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue
index 712d64c236f..b6a9948f487 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/repo/components/repo_tab.vue
@@ -10,6 +10,12 @@ const RepoTab = {
   },
 
   computed: {
+    closeLabel() {
+      if (this.tab.changed) {
+        return `${this.tab.name} changed`;
+      }
+      return `Close ${this.tab.name}`;
+    },
     changedClass() {
       const tabChangedObj = {
         'fa-times': !this.tab.changed,
@@ -34,8 +40,17 @@ export default RepoTab;
 
 <template>
 <li>
-  <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading">
-    <i class="fa" :class="changedClass"></i>
+  <a
+    v-if="!tab.loading"
+    href="#0"
+    class="close"
+    @click.prevent="xClicked(tab)"
+    :aria-label="closeLabel">
+    <i
+      class="fa"
+      :class="changedClass"
+      aria-hidden="true">
+    </i>
   </a>
 
   <a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>