Browsers already do what these listeners were doing
This commit is contained in:
parent
dca535b826
commit
c9fbe61d2b
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user