diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-01 11:36:05 +0200 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-01 11:36:05 +0200 |
| commit | 2334527f1f10b84d2c6e6d05981d9dc7c7fb9255 (patch) | |
| tree | f96c4d9871870e7cb269c3281851b309cd193edf /src | |
| parent | 3c82478309e5a2ca99cb5b8cbc556986627f8665 (diff) | |
Accessibility on list
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/contentList/contentListItem.vue | 16 |
1 files changed, 9 insertions, 7 deletions
diff --git a/src/components/contentList/contentListItem.vue b/src/components/contentList/contentListItem.vue index 00b8d9ab..4a810097 100644 --- a/src/components/contentList/contentListItem.vue +++ b/src/components/contentList/contentListItem.vue @@ -1,14 +1,16 @@ <template> - <a :class="{active: selectedContact === contact.key}" href="" class="app-content-list-item" - @click.prevent.stop="selectContact"> - <input ref="selected" :id="contact.uid" type="checkbox" - class="app-content-list-item-checkbox checkbox"> - <label :for="contact.uid" @click.prevent.stop="toggleSelect" /> + <div :class="{active: selectedContact === contact.key}" tabindex="0" class="app-content-list-item" + @click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact"> + <!-- keyboard accessibility will focus the input and not the label --> + <input ref="selected" :id="contact.key" type="checkbox" + class="app-content-list-item-checkbox checkbox" @keypress.enter.space.prevent.stop="toggleSelect"> + <label :for="contact.key" @click.prevent.stop="toggleSelect" @keypress.enter.space.prevent.stop="toggleSelect" /> <div :style="{ 'backgroundColor': colorAvatar }" class="app-content-list-item-icon">{{ contact.displayName | firstLetter }}</div> <div class="app-content-list-item-line-one">{{ contact.displayName }}</div> <div v-if="contact.email" class="app-content-list-item-line-two">{{ contact.email }}</div> - <div v-if="contact.addressbook.enabled" class="icon-delete" @click.prevent.stop="deleteContact" /> - </a> + <div v-if="contact.addressbook.enabled" class="icon-delete" tabindex="0" + @click.prevent.stop="deleteContact" @keypress.enter.prevent.stop="deleteContact" /> + </div> </template> <script> |