Make "cancel" buttons have proper type in modal forms (#25618)

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.

4 files changed, 52 insertions, 1 deletions

diff --git a/routers/web/devtest/devtest.go b/routers/web/devtest/devtest.go
index 64b732c035..525ca9be53 100644
--- a/routers/web/devtest/devtest.go
+++ b/routers/web/devtest/devtest.go
@@ -34,7 +34,7 @@ func List(ctx *context.Context) {
 
 func FetchActionTest(ctx *context.Context) {
 	_ = ctx.Req.ParseForm()
-	ctx.Flash.Info(ctx.Req.Method + " " + ctx.Req.RequestURI + "<br>" +
+	ctx.Flash.Info("fetch-action: " + ctx.Req.Method + " " + ctx.Req.RequestURI + "<br>" +
 		"Form: " + ctx.Req.Form.Encode() + "<br>" +
 		"PostForm: " + ctx.Req.PostForm.Encode(),
 	)
@@ -52,5 +52,15 @@ func Tmpl(ctx *context.Context) {
 	ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second)
 	ctx.Data["TimeFuture1y"] = now.Add(1 * 366 * 86400 * time.Second)
 
+	if ctx.Req.Method == "POST" {
+		_ = ctx.Req.ParseForm()
+		ctx.Flash.Info("form: "+ctx.Req.Method+" "+ctx.Req.RequestURI+"<br>"+
+			"Form: "+ctx.Req.Form.Encode()+"<br>"+
+			"PostForm: "+ctx.Req.PostForm.Encode(),
+			true,
+		)
+		time.Sleep(2 * time.Second)
+	}
+
 	ctx.HTML(http.StatusOK, base.TplName("devtest"+path.Clean("/"+ctx.Params("sub"))))
 }
diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
index aaa4c2c12d..799bab7594 100644
--- a/templates/devtest/fomantic-modal.tmpl
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -1,5 +1,18 @@
 {{template "base/head" .}}
 <div class="page-content devtest ui container">
+	{{template "base/alert" .}}
+
+	<button class="show-modal" data-modal="#test-modal-form">show modal form</button>
+	<div id="test-modal-form" class="ui mini modal">
+		<div class="header">Form dialog</div>
+		<form class="content" method="post">
+			<div class="ui input"><input name="user_input"></div>
+			{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
+		</form>
+	</div>
+
+	<div class="divider"></div>
+
 	<div class="ui g-modal-confirm modal" id="test-modal-default">
 		<div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
 		<div class="content">
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() {