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.
This commit is contained in:
wxiaoguang 2023-07-03 17:09:38 +08:00 committed by GitHub
parent d8a59d5f12
commit f51c8e0008
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 0 deletions

View file

@ -42,5 +42,15 @@ func Tmpl(ctx *context.Context) {
ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second) ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second)
ctx.Data["TimeFuture1y"] = 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")))) ctx.HTML(http.StatusOK, base.TplName("devtest"+path.Clean("/"+ctx.Params("sub"))))
} }

View file

@ -1,5 +1,18 @@
{{template "base/head" .}} {{template "base/head" .}}
<div class="page-content devtest ui container"> <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="ui g-modal-confirm modal" id="test-modal-default">
<div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div> <div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
<div class="content"> <div class="content">

View file

@ -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;
}

View file

@ -1,6 +1,7 @@
import $ from 'jquery'; import $ from 'jquery';
import {initAriaCheckboxPatch} from './aria/checkbox.js'; import {initAriaCheckboxPatch} from './aria/checkbox.js';
import {initAriaDropdownPatch} from './aria/dropdown.js'; import {initAriaDropdownPatch} from './aria/dropdown.js';
import {initAriaModalPatch} from './aria/modal.js';
import {svg} from '../svg.js'; import {svg} from '../svg.js';
export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)'); 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. // 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(); initAriaCheckboxPatch();
initAriaDropdownPatch(); initAriaDropdownPatch();
initAriaModalPatch();
} }
function initFomanticApiPatch() { function initFomanticApiPatch() {