From f51c8e0008c37644a332da990b791e299130d375 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 3 Jul 2023 17:09:38 +0800
Subject: Make "cancel" buttons have proper type in modal forms (#25618)
 (#25641)

Replace #25446, fix #25438

All "cancel" buttons which do not have "type" should not submit the
form, should not be triggered by "Enter".

This is a complete fix for all modal dialogs.

The major change is "modules/aria/modal.js", "devtest" related code is
for demo/test purpose.
---
 web_src/js/modules/aria/modal.js | 26 ++++++++++++++++++++++++++
 web_src/js/modules/fomantic.js   |  2 ++
 2 files changed, 28 insertions(+)
 create mode 100644 web_src/js/modules/aria/modal.js

(limited to 'web_src')

diff --git a/web_src/js/modules/aria/modal.js b/web_src/js/modules/aria/modal.js
new file mode 100644
index 0000000000..7c9aade790
--- /dev/null
+++ b/web_src/js/modules/aria/modal.js
@@ -0,0 +1,26 @@
+import $ from 'jquery';
+
+const fomanticModalFn = $.fn.modal;
+
+// use our own `$.fn.modal` to patch Fomantic's modal module
+export function initAriaModalPatch() {
+  if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once');
+  $.fn.modal = ariaModalFn;
+  ariaModalFn.settings = fomanticModalFn.settings;
+}
+
+// the patched `$.fn.modal` modal function
+// * it does the one-time attaching on the first call
+function ariaModalFn(...args) {
+  const ret = fomanticModalFn.apply(this, args);
+  if (args[0] === 'show' || args[0]?.autoShow) {
+    for (const el of this) {
+      // If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default).
+      // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed.
+      // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form.
+      // So, all "cancel" buttons without "[type]" must be marked as "type=button".
+      $(el).find('form button.cancel:not([type])').attr('type', 'button');
+    }
+  }
+  return ret;
+}
diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js
index 5988584aca..b78a5fbf95 100644
--- a/web_src/js/modules/fomantic.js
+++ b/web_src/js/modules/fomantic.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import {initAriaCheckboxPatch} from './aria/checkbox.js';
 import {initAriaDropdownPatch} from './aria/dropdown.js';
+import {initAriaModalPatch} from './aria/modal.js';
 import {svg} from '../svg.js';
 
 export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
@@ -26,6 +27,7 @@ export function initGiteaFomantic() {
   // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
   initAriaCheckboxPatch();
   initAriaDropdownPatch();
+  initAriaModalPatch();
 }
 
 function initFomanticApiPatch() {
-- 
cgit v1.2.3