tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-10-31 19:38:23 +00:00
Code Releases Activity

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

Browse Source 
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 14:04:50 +08:00
committed by GitHub
parent 2aa6a785cf
commit 45bc180a15
4 changed files with 52 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web_src/js/modules/aria/modal.js Normal file
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;
}

2
web_src/js/modules/fomantic.js
View File

@@ -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() {