diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2017-08-10 14:17:38 -0500 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2017-08-14 11:09:22 -0500 |
commit | a081a60d89af1f05a8f6f243e073a96e35b2b349 (patch) | |
tree | 38ceff7156e65d7329945bc2dd5f42c250306f60 | |
parent | ecb7c534f60f89a57468148f543a6895692b6081 (diff) | |
download | gitlab-ce-a081a60d89af1f05a8f6f243e073a96e35b2b349.tar.gz |
Make close/changed icon more accessible
Fix
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12198#note_37143527
-rw-r--r-- | app/assets/javascripts/repo/components/repo_tab.vue | 19 |
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> |