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

.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,

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%);
 }

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"
                     >

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) {