diff options
author | wxiaoguang <wxiaoguang@gmail.com> | 2023-07-03 17:09:38 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-07-03 17:09:38 +0800 |
commit | f51c8e0008c37644a332da990b791e299130d375 (patch) | |
tree | b32d9087c8f273bef0a3096503f9128c32c41ca0 /web_src | |
parent | d8a59d5f12fba9bfe8fff1b424ff279a81e817a6 (diff) | |
download | gitea-f51c8e0008c37644a332da990b791e299130d375.tar.gz gitea-f51c8e0008c37644a332da990b791e299130d375.zip |
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.
Diffstat (limited to 'web_src')
-rw-r--r-- | web_src/js/modules/aria/modal.js | 26 | ||||
-rw-r--r-- | web_src/js/modules/fomantic.js | 2 |
2 files changed, 28 insertions, 0 deletions
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() { |