From a782f046764894a829e159762387c9beed06e97a Mon Sep 17 00:00:00 2001
From: Osama Sayegh <asooomaasoooma90@gmail.com>
Date: Tue, 29 Mar 2022 21:29:22 +0300
Subject: [PATCH] FIX: Close user/group card on esc key press (#16306)

`keyUp` is only invoked if the component's root element (or one of its descendants) has focus which isn't great for keyboard users because if they open a user card and want to close it, they have to tab through to the user card and only then will the Esc key actually close the card. This commit adds a `keyup` event listener on the `document` for the Esc key so that the user card is closed (if it's open) no matter where the focus is.
---
 .../app/mixins/card-contents-base.js          | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/mixins/card-contents-base.js b/app/assets/javascripts/discourse/app/mixins/card-contents-base.js
index de7e63f3dcd..cc798fd4b60 100644
--- a/app/assets/javascripts/discourse/app/mixins/card-contents-base.js
+++ b/app/assets/javascripts/discourse/app/mixins/card-contents-base.js
@@ -112,6 +112,7 @@ export default Mixin.create({
     });
 
     document.addEventListener("mousedown", this._clickOutsideHandler);
+    document.addEventListener("keyup", this._escListener);
 
     _cardClickListenerSelectors.forEach((selector) => {
       document
@@ -320,6 +321,7 @@ export default Mixin.create({
     this._super(...arguments);
 
     document.removeEventListener("mousedown", this._clickOutsideHandler);
+    document.removeEventListener("keyup", this._escListener);
 
     _cardClickListenerSelectors.forEach((selector) => {
       document
@@ -340,14 +342,6 @@ export default Mixin.create({
     this._hide();
   },
 
-  keyUp(e) {
-    if (e.key === "Escape") {
-      const target = this.cardTarget;
-      this._close();
-      target.focus();
-    }
-  },
-
   @bind
   _clickOutsideHandler(event) {
     if (this.visible) {
@@ -365,4 +359,13 @@ export default Mixin.create({
 
     return true;
   },
+
+  @bind
+  _escListener(event) {
+    if (this.visible && event.key === "Escape") {
+      this._close();
+      this.cardTarget?.focus();
+      return;
+    }
+  },
 });