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

diff --git a/.eslintrc.json b/.eslintrc.json
index 598b7f3f7e9dd4e91cf149be7bfd5da99030ac72..f82e6b0610115d2a2712743bcd633319ee6cee3e 100644 (file)
--- 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 d61dafdae558a2f0cdfcee842ce869b56034ef1d..6c7395490eaec8433296e0bab19993ce025f82b3 100644 (file)
--- 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 2ede00e183be2d0234adc3c56c205324f1fac140..d25254e3c17529b0b8ef4f4d2935fc89fe6e8c67 100644 (file)
--- 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 ba36d755f9c032755e614e492b5418ffd91e1fda..d8ddf915e5804c4cb3187d5a53f91446649aca40 100644 (file)
--- 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) {