osr-plastic/osr-discourse-src
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

FIX: Allow keyboard navigation when searching emojis in chat (#20157)

Browse Source
This commit is contained in:
Jan Cernik
2023-02-03 11:36:45 -03:00
committed by GitHub
parent d5024d96f1
commit 44df5ee7c8
4 changed files with 115 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
+27 -26
View File
@@ -116,34 +116,36 @@
<div
class="chat-emoji-picker__sections"
{{on "click" this.didSelectEmoji}}
{{on "keydown" this.didSelectEmoji}}
{{on "keydown" this.onSectionsKeyDown}}
role="button"
>
{{#if (gte this.filteredEmojis.length 0)}}
{{#each this.filteredEmojis as |emoji|}}
<img
width="32"
height="32"
class="emoji"
src={{tonable-emoji-url
emoji
this.chatEmojiReactionStore.diversity
}}
tabindex="0"
data-emoji={{emoji.name}}
data-tonable={{if emoji.tonable "true"}}
alt={{emoji.name}}
title={{tonable-emoji-title
emoji
this.chatEmojiReactionStore.diversity
}}
loading="lazy"
/>
{{else}}
<p class="chat-emoji-picker__no-reults">
{{i18n "chat.emoji_picker.no_results"}}
</p>
{{/each}}
<div class="chat-emoji-picker__section filtered">
{{#each this.filteredEmojis as |emoji|}}
<img
width="32"
height="32"
class="emoji"
src={{tonable-emoji-url
emoji
this.chatEmojiReactionStore.diversity
}}
tabindex="0"
data-emoji={{emoji.name}}
data-tonable={{if emoji.tonable "true"}}
alt={{emoji.name}}
title={{tonable-emoji-title
emoji
this.chatEmojiReactionStore.diversity
}}
loading="lazy"
/>
{{else}}
<p class="chat-emoji-picker__no-reults">
{{i18n "chat.emoji_picker.no_results"}}
</p>
{{/each}}
</div>
{{/if}}
{{#each-in this.groups as |section emojis|}}
@@ -158,7 +160,6 @@
(concat "chat.emoji_picker." section)
translatedFallback=section
}}
{{on "keydown" this.didNavigateSection}}
>
<h2 class="chat-emoji-picker__section-title">
{{i18n
plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
+10 -1
View File
@@ -231,6 +231,15 @@ export default class ChatEmojiPicker extends Component {
});
}
@action
onSectionsKeyDown(event) {
if (event.key === "Enter") {
this.didSelectEmoji(event);
} else {
this.didNavigateSection(event);
}
}
@action
didNavigateSection(event) {
const sectionsEmojis = (section) => [...section.querySelectorAll(".emoji")];
@@ -247,7 +256,7 @@ export default class ChatEmojiPicker extends Component {
};
const allEmojis = () => [
...document.querySelectorAll(
".chat-emoji-picker__scrollable-content .emoji"
".chat-emoji-picker__section:not(.hidden) .emoji"
),
];