From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 05:58:21 +0000 (-0400)
Subject: fix: Emoji picker can be closed with escape key, other a11y fixes
X-Git-Url: http://these/git/%7B%60https:/readmes/static/%22%7Burl%7D/%7B?a=commitdiff_plain;h=5ed7352359a4093a11cf2eb7bc7ae9a828381e83;p=lemmy-ui.git

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

diff --git a/.eslintrc.json b/.eslintrc.json
index 598b7f3..f82e6b0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -26,9 +26,7 @@
     "jsx-a11y/aria-activedescendant-has-tabindex": 1,
     "jsx-a11y/aria-role": 1,
     "jsx-a11y/click-events-have-key-events": 1,
-    "jsx-a11y/iframe-has-title": 1,
     "jsx-a11y/interactive-supports-focus": 1,
-    "jsx-a11y/no-redundant-roles": 1,
     "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/role-has-required-aria-props": 1,
     "curly": 0,
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d61dafd..6c73954 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -124,7 +124,8 @@
 
 .emoji-picker-container {
   position: absolute;
-  top: 30px;
+  top: 0;
+  left: 50%;
   z-index: 1000;
   transform: translateX(-50%);
 }
diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 2ede00e..d25254e 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -349,8 +349,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 {person && (
                   <div id="dropdownUser" className="dropdown">
                     <button
+                      type="button"
                       className="btn dropdown-toggle"
-                      role="button"
                       aria-expanded="false"
                       data-bs-toggle="dropdown"
                     >
diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx
index ba36d75..d8ddf91 100644
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/src/shared/components/common/emoji-picker.tsx
@@ -23,6 +23,11 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     this.state = this.emptyState;
     this.handleEmojiClick = this.handleEmojiClick.bind(this);
   }
+
+  closeEmojiMartOnEsc(i, event) {
+    event.key === "Escape" && i.setState({ showPicker: false });
+  }
+
   render() {
     return (
       <span className="emoji-picker">
@@ -38,8 +43,8 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
 
         {this.state.showPicker && (
           <>
-            <div className="position-relative">
-              <div className="emoji-picker-container position-absolute w-100">
+            <div className="position-relative" role="dialog">
+              <div className="emoji-picker-container z-3">
                 <EmojiMart
                   onEmojiClick={this.handleEmojiClick}
                   pickerOptions={{}}
@@ -59,6 +64,10 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
   togglePicker(i: EmojiPicker, e: any) {
     e.preventDefault();
     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) {