Merge pull request #1547 from jsit/fix/a11y-fixes

fix(a11y): Close Emoji Picker on 'esc', make jump link interactive button

.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/app.tsx

@@ -33,12 +33,13 @@ export class App extends Component<any, any> {
       <>
         <Provider i18next={I18NextService.i18n}>
           <div id="app" className="lemmy-site">
-            <a
+            <button
-              className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
+              type="button"
+              className="btn btn-text skip-link bg-light position-absolute start-0 z-3"
               onClick={linkEvent(this, this.handleJumpToContent)}
             >
-              ${I18NextService.i18n.t("jump_to_content", "Jump to content")}
+              {I18NextService.i18n.t("jump_to_content", "Jump to content")}
-            </a>
+            </button>
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}

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

@@ -12,6 +12,10 @@ interface EmojiPickerState {
   showPicker: boolean;
 }
 
+function closeEmojiMartOnEsc(i, event): void {
+  event.key === "Escape" && i.setState({ showPicker: false });
+}
+
 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
   private emptyState: EmojiPickerState = {
     showPicker: false,
@@ -23,6 +27,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     this.state = this.emptyState;
     this.handleEmojiClick = this.handleEmojiClick.bind(this);
   }
+
   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="position-relative" role="dialog">
-              <div className="emoji-picker-container position-absolute w-100">
+              <div className="emoji-picker-container">
                 <EmojiMart
                   onEmojiClick={this.handleEmojiClick}
                   pickerOptions={{}}
@@ -56,9 +61,17 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     );
   }
 
+  componentWillUnmount() {
+    document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
+  }
+
   togglePicker(i: EmojiPicker, e: any) {
     e.preventDefault();
     i.setState({ showPicker: !i.state.showPicker });
+
+    i.state.showPicker
+      ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
+      : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
   }
 
   handleEmojiClick(e: any) {