LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-01 16:51:13 +00:00
Code Issues Projects Releases Wiki Activity

fix: Emoji picker can be closed with escape key, other a11y fixes

Browse source
This commit is contained in:
Jay Sitter 2023-06-24 01:58:21 -04:00
parent 07c7177a25
commit 5ed7352359
4 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.json
View file

@ -26,9 +26,7 @@
"jsx-a11y/aria-activedescendant-has-tabindex": 1, "jsx-a11y/aria-activedescendant-has-tabindex": 1,
"jsx-a11y/aria-role": 1, "jsx-a11y/aria-role": 1,
"jsx-a11y/click-events-have-key-events": 1, "jsx-a11y/click-events-have-key-events": 1,
"jsx-a11y/iframe-has-title": 1,
"jsx-a11y/interactive-supports-focus": 1, "jsx-a11y/interactive-supports-focus": 1,
"jsx-a11y/no-redundant-roles": 1,
"jsx-a11y/no-static-element-interactions": 1, "jsx-a11y/no-static-element-interactions": 1,
"jsx-a11y/role-has-required-aria-props": 1, "jsx-a11y/role-has-required-aria-props": 1,
"curly": 0, "curly": 0,

3
src/assets/css/main.css
View file

@ -124,7 +124,8 @@
.emoji-picker-container { .emoji-picker-container {
position: absolute; position: absolute;
top: 30px; top: 0;
left: 50%;
z-index: 1000; z-index: 1000;
transform: translateX(-50%); transform: translateX(-50%);
} }

2
src/shared/components/app/navbar.tsx
View file

@ -349,8 +349,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{person && ( {person && (
<div id="dropdownUser" className="dropdown"> <div id="dropdownUser" className="dropdown">
<button <button
type="button"
className="btn dropdown-toggle" className="btn dropdown-toggle"
role="button"
aria-expanded="false" aria-expanded="false"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
> >

13
src/shared/components/common/emoji-picker.tsx
View file

@ -23,6 +23,11 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
this.state = this.emptyState; this.state = this.emptyState;
this.handleEmojiClick = this.handleEmojiClick.bind(this); this.handleEmojiClick = this.handleEmojiClick.bind(this);
} }
closeEmojiMartOnEsc(i, event) {
event.key === "Escape" && i.setState({ showPicker: false });
}
render() { render() {
return ( return (
<span className="emoji-picker"> <span className="emoji-picker">
@ -38,8 +43,8 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
{this.state.showPicker && ( {this.state.showPicker && (
<> <>
<div className="position-relative"> <div className="position-relative" role="dialog">
<div className="emoji-picker-container position-absolute w-100"> <div className="emoji-picker-container z-3">
<EmojiMart <EmojiMart
onEmojiClick={this.handleEmojiClick} onEmojiClick={this.handleEmojiClick}
pickerOptions={{}} pickerOptions={{}}
@ -59,6 +64,10 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
togglePicker(i: EmojiPicker, e: any) { togglePicker(i: EmojiPicker, e: any) {
e.preventDefault(); e.preventDefault();
i.setState({ showPicker: !i.state.showPicker }); i.setState({ showPicker: !i.state.showPicker });
i.state.showPicker
? document.addEventListener("keyup", e => i.closeEmojiMartOnEsc(i, e))
: document.removeEventListener("keyup", e => i.closeEmojiMartOnEsc(i, e));
} }
handleEmojiClick(e: any) { handleEmojiClick(e: any) {