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

15
src/components/views/rooms/EmojiButton.tsx
View file

@ -36,17 +36,14 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
let contextMenu: React.ReactElement | null = null;
if (menuDisplayed && button.current) {
const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect());
const onFinished = (): void => {
closeMenu();
overflowMenuCloser?.();
};
contextMenu = (
<ContextMenu
{...position}
onFinished={() => {
closeMenu();
overflowMenuCloser?.();
}}
managed={false}
>
<EmojiPicker onChoose={addEmoji} />
<ContextMenu {...position} onFinished={onFinished} managed={false}>
<EmojiPicker onChoose={addEmoji} onFinished={onFinished} />
</ContextMenu>
);
}