diff options
| author | Julius Härtl <jus@bitgrid.net> | 2018-12-03 12:39:02 +0100 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2018-12-03 12:39:02 +0100 |
| commit | 867049d0562940feb1085d31fba223d0d63e7f03 (patch) | |
| tree | 5d7bc0ca6376d822db3109d9c75bdfc328b3b590 /src | |
| parent | bcc71722756fec3258786be8399965c65fa8e37a (diff) | |
Fix keyboard focus of emoji picker
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Composer.vue | 21 |
1 files changed, 17 insertions, 4 deletions
diff --git a/src/components/Composer.vue b/src/components/Composer.vue index f179516d..f778e3d9 100644 --- a/src/components/Composer.vue +++ b/src/components/Composer.vue @@ -36,8 +36,9 @@ placeholder="Share a thought…" @keyup.enter="keyup" /> </vue-tribute> <emoji-picker :search="search" class="emoji-picker-wrapper" @emoji="insert"> - <div v-tooltip="'Insert emoji'" slot="emoji-invoker" slot-scope="{ events }" - class="emoji-invoker" v-on="events" /> + <a v-tooltip="'Insert emoji'" slot="emoji-invoker" slot-scope="{ events }" + class="emoji-invoker" tabindex="0" v-on="events" + @keyup.enter="events.click" @keyup.space="events.click" /> <div slot="emoji-picker" slot-scope="{ emojis, insert, display }" class="emoji-picker popovermenu"> <div> <div> @@ -48,7 +49,9 @@ <h5>{{ category }}</h5> <div> <span v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" :title="emojiName" - class="emoji" @click="insert(emoji)" v-html="$twemoji.parse(emoji)" /> + tabindex="0" + class="emoji" @click="insert(emoji)" @keyup.enter="insert(emoji)" + @keyup.space="insert(emoji)" v-html="$twemoji.parse(emoji)" /> </div> </div> </div> @@ -142,6 +145,11 @@ background-size: 16px 16px; height: 38px; cursor: pointer; + display: block; + } + .emoji-invoker:focus, + .emoji-invoker:hover { + opacity: 1; } .emoji-picker-wrapper { position: absolute; @@ -163,8 +171,13 @@ .emoji-picker input { width: 100%; } + .emoji-picker span.emoji { + padding: 3px; + } + .emoji-picker span.emoji:focus { + background-color: var(--color-background-dark); + } .emoji-picker .emoji img { - margin: 3px; width: 16px; } .popovermenu { |