From 07c7177a259647b12bfed52bf0f5c3cd49badcc4 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 00:54:22 -0400
Subject: [PATCH 1/4] fix: Fix some a11y issues on jump to content button

---
 src/shared/components/app/app.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 96bf1016..a815ade9 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -33,12 +33,14 @@ export class App extends Component<any, any> {
       <>
         <Provider i18next={I18NextService.i18n}>
           <div id="app" className="lemmy-site">
-            <a
-              className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
+            <button
+              type="button"
+              tabIndex="0"
+              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")}
-            </a>
+              {I18NextService.i18n.t("jump_to_content", "Jump to content")}
+            </button>
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}

From 5ed7352359a4093a11cf2eb7bc7ae9a828381e83 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 01:58:21 -0400
Subject: [PATCH 2/4] fix: Emoji picker can be closed with escape key, other
 a11y fixes

---
 .eslintrc.json                                |  2 --
 src/assets/css/main.css                       |  3 ++-
 src/shared/components/app/navbar.tsx          |  2 +-
 src/shared/components/common/emoji-picker.tsx | 13 +++++++++++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 598b7f3f..f82e6b06 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 d61dafda..6c739549 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 2ede00e1..d25254e3 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 ba36d755..d8ddf915 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) {

From b2ef79f5e49758e01f9d22f678e2ee9458ff67c6 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 16:27:29 -0400
Subject: [PATCH 3/4] fix: Button doesn't need tabindex

---
 src/shared/components/app/app.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index a815ade9..3e334376 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -35,7 +35,6 @@ export class App extends Component<any, any> {
           <div id="app" className="lemmy-site">
             <button
               type="button"
-              tabIndex="0"
               className="btn btn-text skip-link bg-light position-absolute start-0 z-3"
               onClick={linkEvent(this, this.handleJumpToContent)}
             >

From b98939dd0fe0a30b65abcb538dd08a7003f46de6 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 16:27:55 -0400
Subject: [PATCH 4/4] fix: Fix some emoji escape logic

---
 src/shared/components/common/emoji-picker.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx
index d8ddf915..1385ce8f 100644
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/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,
@@ -24,10 +28,6 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     this.handleEmojiClick = this.handleEmojiClick.bind(this);
   }
 
-  closeEmojiMartOnEsc(i, event) {
-    event.key === "Escape" && i.setState({ showPicker: false });
-  }
-
   render() {
     return (
       <span className="emoji-picker">
@@ -44,7 +44,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
         {this.state.showPicker && (
           <>
             <div className="position-relative" role="dialog">
-              <div className="emoji-picker-container z-3">
+              <div className="emoji-picker-container">
                 <EmojiMart
                   onEmojiClick={this.handleEmojiClick}
                   pickerOptions={{}}
@@ -61,13 +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 => i.closeEmojiMartOnEsc(i, e))
-      : document.removeEventListener("keyup", e => i.closeEmojiMartOnEsc(i, e));
+      ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
+      : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
   }
 
   handleEmojiClick(e: any) {