IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Clean up d-modal (#20443)

Browse Source
This commit is contained in:
Jarek Radosz 2023-02-27 13:06:06 +01:00 committed by GitHub
parent 69c7df2e56
commit badd40090f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
app/assets/javascripts/discourse/app/components/d-modal.js
View File

@ -1,7 +1,7 @@
import Component from "@ember/component"; import Component from "@ember/component";
import I18n from "I18n"; import I18n from "I18n";
import { next, schedule } from "@ember/runloop"; import { next, schedule } from "@ember/runloop";
import discourseComputed, { bind, on } from "discourse-common/utils/decorators"; import discourseComputed, { bind } from "discourse-common/utils/decorators";
export default Component.extend({ export default Component.extend({
classNameBindings: [ classNameBindings: [
@ -25,6 +25,11 @@ export default Component.extend({
role: "dialog", role: "dialog",
headerClass: null, headerClass: null,
// We handle ESC ourselves
"data-keyboard": "false",
// Inform screen readers of the modal
"aria-modal": "true",
init() { init() {
this._super(...arguments); this._super(...arguments);
@ -36,10 +41,25 @@ export default Component.extend({
} }
}, },
// We handle ESC ourselves didInsertElement() {
"data-keyboard": "false", this._super(...arguments);
// Inform screenreaders of the modal
"aria-modal": "true", this.appEvents.on("modal:body-shown", this, "_modalBodyShown");
document.documentElement.addEventListener(
"keydown",
this._handleModalEvents
);
},
willDestroyElement() {
this._super(...arguments);
this.appEvents.off("modal:body-shown", this, "_modalBodyShown");
document.documentElement.removeEventListener(
"keydown",
this._handleModalEvents
);
},
@discourseComputed("title", "titleAriaElementId") @discourseComputed("title", "titleAriaElementId")
ariaLabelledby(title, titleAriaElementId) { ariaLabelledby(title, titleAriaElementId) {
@ -53,24 +73,6 @@ export default Component.extend({
return; return;
}, },
@on("didInsertElement")
setUp() {
this.appEvents.on("modal:body-shown", this, "_modalBodyShown");
document.documentElement.addEventListener(
"keydown",
this._handleModalEvents
);
},
@on("willDestroyElement")
cleanUp() {
this.appEvents.off("modal:body-shown", this, "_modalBodyShown");
document.documentElement.removeEventListener(
"keydown",
this._handleModalEvents
);
},
triggerClickOnEnter(e) { triggerClickOnEnter(e) {
if (!this.submitOnEnter) { if (!this.submitOnEnter) {
return false; return false;
@ -91,17 +93,15 @@ export default Component.extend({
if (!this.dismissable) { if (!this.dismissable) {
return; return;
} }
const $target = $(e.target);
if ( if (
$target.hasClass("modal-middle-container") || e.target.classList.contains("modal-middle-container") ||
$target.hasClass("modal-outer-container") e.target.classList.contains("modal-outer-container")
) { ) {
// Send modal close (which bubbles to ApplicationRoute) if clicked outside. // Send modal close (which bubbles to ApplicationRoute) if clicked outside.
// We do this because some CSS of ours seems to cover the backdrop and makes // We do this because some CSS of ours seems to cover the backdrop and makes
// it unclickable. // it unclickable.
return ( return this.attrs.closeModal?.("initiatedByClickOut");
this.attrs.closeModal && this.attrs.closeModal("initiatedByClickOut")
);
} }
}, },
@ -156,10 +156,12 @@ export default Component.extend({
if (event.key === "Escape" && this.dismissable) { if (event.key === "Escape" && this.dismissable) {
next(() => this.attrs.closeModal("initiatedByESC")); next(() => this.attrs.closeModal("initiatedByESC"));
} }
if (event.key === "Enter" && this.triggerClickOnEnter(event)) { if (event.key === "Enter" && this.triggerClickOnEnter(event)) {
this.element?.querySelector(".modal-footer .btn-primary")?.click(); this.element.querySelector(".modal-footer .btn-primary")?.click();
event.preventDefault(); event.preventDefault();
} }
if (event.key === "Tab") { if (event.key === "Tab") {
this._trapTab(event); this._trapTab(event);
} }
@ -199,9 +201,10 @@ export default Component.extend({
return; return;
} }
focusableElements = focusableElements + ", button:enabled"; focusableElements += ", button:enabled";
const firstFocusableElement = const firstFocusableElement =
innerContainer.querySelectorAll(focusableElements)?.[0]; innerContainer.querySelector(focusableElements);
const focusableContent = innerContainer.querySelectorAll(focusableElements); const focusableContent = innerContainer.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1]; const lastFocusableElement = focusableContent[focusableContent.length - 1];