imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add arrow key controls to emoji and reaction pickers (#10637)

Browse source 
* Add arrow key controls to emoji and reaction pickers

* Iterate types

* Switch to using aria-activedescendant

* Add tests

* Fix tests

* Iterate

* Update test

* Tweak header keyboard navigation behaviour

* Also handle scrolling on left/right arrow keys

* Iterate
This commit is contained in:
Michael Telatynski 2023-04-20 15:56:21 +01:00 • committed by GitHub
parent 0d9fa0515d
commit 2da52372d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 277 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/emojipicker/QuickReactions.tsx
View file

@ -20,6 +20,8 @@ import React from "react";
import { _t } from "../../../languageHandler";
import { getEmojiFromUnicode, IEmoji } from "../../../emoji";
import Emoji from "./Emoji";
import { ButtonEvent } from "../elements/AccessibleButton";
import Toolbar from "../../../accessibility/Toolbar";
// We use the variation-selector Heart in Quick Reactions for some reason
const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map((emoji) => {
@ -32,7 +34,7 @@ const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀
interface IProps {
selectedEmojis?: Set<string>;
onClick(emoji: IEmoji): void;
onClick(ev: ButtonEvent, emoji: IEmoji): void;
}
interface IState {
@ -70,7 +72,7 @@ class QuickReactions extends React.Component<IProps, IState> {
</React.Fragment>
)}
</h2>
<ul className="mx_EmojiPicker_list" aria-label={_t("Quick Reactions")}>
<Toolbar className="mx_EmojiPicker_list" aria-label={_t("Quick Reactions")}>
{QUICK_REACTIONS.map((emoji) => (
<Emoji
key={emoji.hexcode}
@ -81,7 +83,7 @@ class QuickReactions extends React.Component<IProps, IState> {
selectedEmojis={this.props.selectedEmojis}
/>
))}
</ul>
</Toolbar>
</section>
);
}