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.tags/v1.21.0-rc0
@@ -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")))) | |||
} |
@@ -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"> |
@@ -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; | |||
} |
@@ -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() { |