Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Osama Sayegh 2022-03-29 21:29:22 +03:00 committed by GitHub
parent 1210cfe60e
commit a782f04676
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/javascripts/discourse/app/mixins/card-contents-base.js
View File

@ -112,6 +112,7 @@ export default Mixin.create({
}); });
document.addEventListener("mousedown", this._clickOutsideHandler); document.addEventListener("mousedown", this._clickOutsideHandler);
document.addEventListener("keyup", this._escListener);
_cardClickListenerSelectors.forEach((selector) => { _cardClickListenerSelectors.forEach((selector) => {
document document
@ -320,6 +321,7 @@ export default Mixin.create({
this._super(...arguments); this._super(...arguments);
document.removeEventListener("mousedown", this._clickOutsideHandler); document.removeEventListener("mousedown", this._clickOutsideHandler);
document.removeEventListener("keyup", this._escListener);
_cardClickListenerSelectors.forEach((selector) => { _cardClickListenerSelectors.forEach((selector) => {
document document
@ -340,14 +342,6 @@ export default Mixin.create({
this._hide(); this._hide();
}, },
keyUp(e) {
if (e.key === "Escape") {
const target = this.cardTarget;
this._close();
target.focus();
}
},
@bind @bind
_clickOutsideHandler(event) { _clickOutsideHandler(event) {
if (this.visible) { if (this.visible) {
@ -365,4 +359,13 @@ export default Mixin.create({
return true; return true;
}, },
@bind
_escListener(event) {
if (this.visible && event.key === "Escape") {
this._close();
this.cardTarget?.focus();
return;
}
},
}); });