SWED-2504 patch new dialog

src/less/components/dialog.less

@@ -15,7 +15,7 @@ dialog {
 }
 
 // TODO: can be removed in next major release when silent support for div.dialog is over
-.dialog {
+.dialog:not(dialog) {
 	position: fixed;
 	top: 0;
 	right: 0;
@@ -138,7 +138,7 @@ dialog {
 body.dialog-open {
 	overflow: hidden;
 
-	.dialog {
+	.dialog:not(dialog) {
 		overflow-x: hidden;
 		overflow-y: auto;
 		display: flex;
@@ -326,7 +326,7 @@ dialog {
 
 // MARK: A11y reduced motion
 @media (forced-colors: active) {
-	.dialog {
+	.dialog:not(dialog) {
 		border: 10px solid;
 
 		> section {

src/scripts/main/dialog/index.js

@@ -124,21 +124,42 @@ const _createDialog = (dialogQuery) => {
 // MARK: script for <dialog> element
 
 const _activateDialogElement = (dialog) => {
-	const dialogInvoker = document.querySelector(
+	const dialogInvokers = document.querySelectorAll(
 		`button[data-dialog-open="${dialog.id}"]`,
 	);
 	const closeDialogButtons = dialog.querySelectorAll(
 		"button[data-dialog-close]",
 	);
 
-	// add event listener on dialogInvoker, it should call dialog.showModal()
-	dialogInvoker.addEventListener("click", () => {
-		dialog.showModal();
-	});
+	// TODO: fails gracefully, don't THROW
+	// TODO: improve DX feedback (for non-existing open & close buttons)
+
+	if (!dialogInvokers.length) {
+		console.error(
+			"There was no open button implemented for the dialog. Please make sure you add at least 1 button with the correct attributes to your HTML for the script to work (or do not call this script and use the JS methods on your side)",
+		);
+
+		return;
+	}
+
+	if (!closeDialogButtons.length) {
+		console.error(
+			"There was no close button implemented for the dialog. Please make sure you add at least 1 button with the correct attributes to your HTML for the script to work (or do not call this script and use the JS methods on your side)",
+		);
+
+		return;
+	}
+
+	// add event listener on dialogInvokers, it should call dialog.showModal()
+	[...dialogInvokers]?.map((invokerBtn) =>
+		invokerBtn?.addEventListener("click", () => {
+			dialog.showModal();
+		}),
+	);
 
 	// add event listener on dialogs close button, it should call dialog.close()
-	[...closeDialogButtons].map((closeBtn) =>
-		closeBtn.addEventListener("click", () => {
+	[...closeDialogButtons]?.map((closeBtn) =>
+		closeBtn?.addEventListener("click", () => {
 			dialog.close();
 		}),
 	);