Browsers already do what these listeners were doing

This commit is contained in:
James Lyne 2021-05-26 18:44:32 +01:00
parent dca535b826
commit c9fbe61d2b
3 changed files with 3 additions and 32 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}"> <section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
<button :id="`${name}-heading`" type="button" class="section__heading" <button :id="`${name}-heading`" type="button" class="section__heading"
@click.prevent="toggle" @keydown="handleKeydown" :title="title" @click.prevent="toggle" :title="title"
:aria-expanded="!collapsed" :aria-controls="`${name}-content`"> :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
<span> <span>
<slot name="heading"></slot> <slot name="heading"></slot>
@ -43,16 +43,6 @@
}, },
methods: { methods: {
handleKeydown(e: KeyboardEvent) {
if(e.key !== ' ' && e.key !== 'Enter') {
return;
}
e.preventDefault();
this.toggle();
},
toggle() { toggle() {
useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name); useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name);
} }

View File

@ -25,8 +25,7 @@
<span class="target__status" v-show="target.hidden">{{ messageHidden }}</span> <span class="target__status" v-show="target.hidden">{{ messageHidden }}</span>
</span> </span>
<button class="target__unfollow" type="button" :title="messageUnfollowTitle" <button class="target__unfollow" type="button" :title="messageUnfollowTitle"
@click.prevent="unfollow" @click.prevent="unfollow">{{ messageUnfollow }}</button>
@keydown="onKeydown">{{ messageUnfollow }}</button>
</div> </div>
</section> </section>
</template> </template>
@ -60,13 +59,6 @@ export default defineComponent({
unfollow = () => { unfollow = () => {
useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined); useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
}, },
onKeydown = (e: KeyboardEvent) => {
if(e.key !== ' ') {
return;
}
unfollow();
},
updatePlayerImage = async () => { updatePlayerImage = async () => {
image.value = defaultImage; image.value = defaultImage;
@ -83,7 +75,6 @@ export default defineComponent({
return { return {
image, image,
onKeydown,
unfollow, unfollow,
heading, heading,
messageUnfollow, messageUnfollow,

View File

@ -18,7 +18,7 @@
<li :class="{'server': true, 'server--selected': selected}" role="none"> <li :class="{'server': true, 'server--selected': selected}" role="none">
<button type="button" :class="{'active': selected}" <button type="button" :class="{'active': selected}"
role="option" :aria-pressed="selected" :title="server.label || server.id" role="option" :aria-pressed="selected" :title="server.label || server.id"
@click="setCurrentServer(server.id)" @keydown="(e) => handleKeydown(e, server.id)">{{ server.label || server.id }} @click="setCurrentServer(server.id)">{{ server.label || server.id }}
</button> </button>
</li> </li>
</template> </template>
@ -48,16 +48,6 @@ export default defineComponent({
}, },
methods: { methods: {
handleKeydown(e: KeyboardEvent, serverId: string) {
if(e.key !== ' ' && e.key !== 'Enter') {
return;
}
e.preventDefault();
this.setCurrentServer(serverId);
},
setCurrentServer(serverId: string) { setCurrentServer(serverId: string) {
useStore().commit(MutationTypes.SET_CURRENT_SERVER, serverId); useStore().commit(MutationTypes.SET_CURRENT_SERVER, serverId);
} }