github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 19:02:46 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: intercept escape in lightbox and prevent default (#22923)

Browse Source 
The escape key is used as a shortcut to escape the Discourse Lightbox. However, some browsers also use the escape key to exit fullscreen mode.

This change is to allow escaping the lightbox when browser is in fullscreen mode, while preventing any behavior associated with the Escape key (such as exiting fullscreen). This has to be done on the keydown event, as this means we can handle our logic and then preventDefault before the browser tries to exit fullscreen.
This commit is contained in:
David Battersby 2023-08-02 12:48:47 +08:00 committed by GitHub
parent 773b22e8d0
commit db7581ce49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/app/components/d-lightbox.hbs
View File

@ -15,6 +15,7 @@
class="d-lightbox__content"
style={{this.CSSVars}}
aria-labelledby={{this.titleElementId}}
{{on "keydown" this.onKeydown passive=false capture=true}}
{{on "keyup" this.onKeyup passive=true capture=true}}
>
<div class="d-lightbox__focus-trap" tabindex="0"></div>

12
app/assets/javascripts/discourse/app/components/d-lightbox.js
View File

@ -357,6 +357,14 @@ export default class DLightbox extends Component {
this.hasExpandedTitle = !this.hasExpandedTitle;
}
@bind
onKeydown(event) {
if (event.key === KEYBOARD_SHORTCUTS.CLOSE) {
event.preventDefault();
return this.close();
}
}
@bind
onKeyup({ key }) {
if (KEYBOARD_SHORTCUTS.PREVIOUS.includes(key)) {
@ -367,10 +375,6 @@ export default class DLightbox extends Component {
return this.showNextItem();
}
if (key === KEYBOARD_SHORTCUTS.CLOSE) {
return this.close();
}
if (key === KEYBOARD_SHORTCUTS.ZOOM) {
return this.toggleZoom();
}

2
app/assets/javascripts/discourse/tests/acceptance/d-lightbox-test.js
View File

@ -626,7 +626,7 @@ acceptance("Experimental Lightbox - interaction", function (needs) {
requestFullscreenStub.restore();
exitFullscreenStub.restore();
await triggerKeyEvent(SELECTORS.LIGHTBOX_CONTENT, "keyup", "Escape");
await triggerKeyEvent(SELECTORS.LIGHTBOX_CONTENT, "keydown", "Escape");
assert.dom(SELECTORS.LIGHTBOX_CONTENT).doesNotExist();
});