Drop Fomantic tab, checkbox and form patches (#37377)

Clean up the fomantic helpers that nothing inside fomantic depends on.
Manually tested all functionality.

---------

Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/repo/diff/image_diff.tmpl

@@ -7,8 +7,8 @@
 			data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
-			<overflow-menu class="ui secondary pointing tabular menu custom">
+			<overflow-menu class="ui secondary pointing tabular menu">
-				<div class="overflow-menu-items tw-justify-center">
+				<div class="overflow-menu-items tw-justify-center" data-global-init="initTabSwitcher">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.NameHash}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
 					<a class="item" data-tab="diff-swipe-{{.file.NameHash}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>

templates/repo/editor/edit.tmpl

@@ -19,7 +19,7 @@
 						<div class="field">
 							<div class="ui top attached header">
 								<div class="flex-left-right">
-									<div class="ui compact small menu small-menu-items repo-editor-menu" data-repo-link="{{.RepoLink}}" data-ref-sub-url="{{.RefTypeNameSubURL}}" data-branch-name="{{.BranchName}}">
+									<div class="ui compact small menu small-menu-items repo-editor-menu" data-repo-link="{{.RepoLink}}" data-ref-sub-url="{{.RefTypeNameSubURL}}" data-branch-name="{{.BranchName}}" data-global-init="initTabSwitcher">
 										<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
 										<a class="item {{if not .CodeEditorConfig.Previewable}}tw-hidden{{end}}" data-tab="preview">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
 										{{if not .IsNewFile}}

templates/repo/editor/patch.tmpl

@@ -23,13 +23,13 @@
 				<div class="ui top attached header">
 					<div class="flex-left-right">
 						<div class="ui compact small menu small-menu-items repo-editor-menu">
-							<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
+							<a class="active item">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
 						</div>
 						{{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}}
 					</div>
 				</div>
 				<div class="ui bottom attached segment tw-p-0">
-					<div class="ui active tab tw-rounded-b" data-tab="write">
+					<div class="ui active tab tw-rounded-b">
 						<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-patch"
 							data-code-editor-config="{{JsonUtils.EncodeToString $.CodeEditorConfig}}"
 							data-context="{{.RepoLink}}"

templates/repo/settings/webhook/history.tmpl

@@ -33,7 +33,7 @@
 						</span>
 					</div>
 					<div class="info tw-hidden" id="info-{{.ID}}">
-						<div class="ui top attached tabular menu">
+						<div class="ui top attached tabular menu" data-global-init="initTabSwitcher">
 							<a class="item active" data-tab="request-{{.ID}}">
 								{{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.request")}}
 							</a>

templates/user/auth/link_account.tmpl

@@ -1,16 +1,14 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
 	<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
-		<div class="overflow-menu-items tw-justify-center">
+		<div class="overflow-menu-items tw-justify-center" data-global-init="initTabSwitcher">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
-				<a class="item {{if not .user_exists}}active{{end}}"
+				<a class="item {{if not .user_exists}}active{{end}}" data-tab="auth-link-signup-tab">
-					data-tab="auth-link-signup-tab">
 					{{ctx.Locale.Tr "auth.oauth_signup_tab"}}
 				</a>
 			{{end}}
-			<a class="item {{if .user_exists}}active{{end}}"
+			<a class="item {{if .user_exists}}active{{end}}" data-tab="auth-link-signin-tab">
-				data-tab="auth-link-signin-tab">
 				{{ctx.Locale.Tr "auth.oauth_signin_tab"}}
 			</a>
 		</div>

web_src/js/features/admin/common.ts

@@ -1,7 +1,7 @@
 import {checkAppUrl} from '../common-page.ts';
 import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
 import {POST} from '../../modules/fetch.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {showFomanticModal} from '../../modules/fomantic/modal.ts';
 import {pathEscape} from '../../utils/url.ts';
 
 const {appSubUrl} = window.config;
@@ -250,7 +250,7 @@ function initAdminNotice() {
     const elNoticeDesc = el.closest('tr')!.querySelector('.notice-description')!;
     const elModalDesc = detailModal.querySelector('.content pre')!;
     elModalDesc.textContent = elNoticeDesc.textContent;
-    fomanticQuery(detailModal).modal('show');
+    showFomanticModal(detailModal);
   }));
 
   // Select actions

web_src/js/features/citation.ts

@@ -1,6 +1,6 @@
 import {getCurrentLocale} from '../utils.ts';
 import {errorMessage} from '../modules/errors.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {showFomanticModal} from '../modules/fomantic/modal.ts';
 import {localUserSettings} from '../modules/user-settings.ts';
 
 const {pageData} = window.config;
@@ -66,6 +66,6 @@ export async function initCitationFileCopyContent() {
       inputContent.select();
     });
 
-    fomanticQuery('#cite-repo-modal').modal('show');
+    showFomanticModal(document.querySelector('#cite-repo-modal'));
   });
 }

web_src/js/features/common-button.ts

@@ -1,6 +1,6 @@
 import {POST} from '../modules/fetch.ts';
 import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {showFomanticModal} from '../modules/fomantic/modal.ts';
 import {camelize} from 'vue';
 import {applyAutoFocus} from './common-page.ts';
 
@@ -42,7 +42,7 @@ export function initGlobalDeleteButton(): void {
         }
       }
 
-      fomanticQuery(modal).modal({
+      showFomanticModal(modal, {
         closable: false,
         onApprove: () => {
           // if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
@@ -76,7 +76,7 @@ export function initGlobalDeleteButton(): void {
           modal.classList.add('is-loading'); // the request is in progress, so also add loading indicator to the modal
           return false; // prevent modal from closing automatically
         },
-      }).modal('show');
+      });
     });
   }
 }
@@ -174,7 +174,7 @@ function onShowModalClick(el: HTMLElement, e: MouseEvent) {
     }
   }
 
-  fomanticQuery(elModal).modal('show');
+  showFomanticModal(elModal);
 }
 
 export function initGlobalButtons(): void {

web_src/js/features/common-page.ts

@@ -1,6 +1,7 @@
 import {GET, POST} from '../modules/fetch.ts';
 import {showGlobalErrorMessage} from '../modules/errors.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {initTabSwitcher} from '../modules/fomantic/tab.ts';
 import {addDelegatedEventListener, queryElems} from '../utils/dom.ts';
 import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
 import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
@@ -100,7 +101,7 @@ export function initGlobalDropdown() {
 }
 
 export function initGlobalComponent() {
-  fomanticQuery('.ui.menu.tabular:not(.custom) .item').tab();
+  registerGlobalInitFunc('initTabSwitcher', initTabSwitcher);
   registerGlobalInitFunc('initAvatarUploader', initAvatarUploaderWithCropper);
   registerGlobalInitFunc('initSearchRepoBox', initCompSearchRepoBox);
 }

web_src/js/features/comp/ComboMarkdownEditor.ts

@@ -23,7 +23,7 @@ import {
 } from './EditorMarkdown.ts';
 import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
 import {createTippy} from '../../modules/tippy.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {initTabSwitcher} from '../../modules/fomantic/tab.ts';
 import type EasyMDE from 'easymde';
 import {localUserSettings} from '../../modules/user-settings.ts';
 
@@ -204,22 +204,21 @@ export class ComboMarkdownEditor {
   }
 
   setupTab() {
-    const tabs = this.container.querySelectorAll<HTMLElement>('.tabular.menu > .item');
+    const elTabular = this.container.querySelector('.ui.tabular');
-    if (!tabs.length) return;
+    if (!elTabular) return;
+    this.tabEditor = this.container.querySelector('[data-tab-for="markdown-writer"]')!;
+    this.tabPreviewer = this.container.querySelector('[data-tab-for="markdown-previewer"]')!;
+    const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
+    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
 
     // Fomantic Tab requires the "data-tab" to be globally unique.
     // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
     const tabIdSuffix = generateElemId();
-    const tabsArr = Array.from(tabs);
-    this.tabEditor = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer')!;
-    this.tabPreviewer = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer')!;
     this.tabEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
     this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
-
-    const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
-    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
     panelEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
     panelPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
+    initTabSwitcher(elTabular);
 
     this.tabEditor.addEventListener('click', () => {
       requestAnimationFrame(() => {
@@ -227,8 +226,6 @@ export class ComboMarkdownEditor {
       });
     });
 
-    fomanticQuery(tabs).tab();
-
     this.tabPreviewer.addEventListener('click', async () => {
       const formData = new FormData();
       formData.append('mode', this.previewMode);

web_src/js/features/comp/ConfirmModal.ts

@@ -1,7 +1,7 @@
 import {svg} from '../../svg.ts';
 import {html, htmlRaw} from '../../utils/html.ts';
 import {createElementFromHTML} from '../../utils/dom.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {showFomanticModal} from '../../modules/fomantic/modal.ts';
 import {hideToastsAll} from '../../modules/toast.ts';
 
 const {i18n} = window.config;
@@ -32,15 +32,14 @@ export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<
   // it's fine to do so because the modal is triggered by user's explicit action, so the user should already have read the toast messages
   hideToastsAll();
   return new Promise((resolve) => {
-    const $modal = fomanticQuery(modal);
+    showFomanticModal(modal, {
-    $modal.modal({
       onApprove() {
         resolve(true);
       },
       onHidden() {
-        $modal.remove();
+        modal.remove();
         resolve(false);
       },
-    }).modal('show');
+    });
   });
 }

web_src/js/features/comp/LabelEdit.ts

@@ -1,5 +1,5 @@
 import {toggleElem} from '../../utils/dom.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {showFomanticModal} from '../../modules/fomantic/modal.ts';
 import {submitFormFetchAction} from '../common-fetch-action.ts';
 
 function nameHasScope(name: string): boolean {
@@ -65,7 +65,7 @@ export function initCompLabelEdit(pageSelector: string) {
     form.action = isEdit ? `${curPageLink}/edit` : `${curPageLink}/new`;
     toggleElem(elIsArchivedField, isEdit);
     syncModalUi();
-    fomanticQuery(elModal).modal({
+    showFomanticModal(elModal, {
       onApprove() {
         if (!form.checkValidity()) {
           form.reportValidity();
@@ -74,7 +74,7 @@ export function initCompLabelEdit(pageSelector: string) {
         submitFormFetchAction(form);
         return false;
       },
-    }).modal('show');
+    });
   };
 
   elModal.addEventListener('input', () => syncModalUi());

web_src/js/features/imagediff.ts

@@ -1,7 +1,6 @@
 import {GET} from '../modules/fetch.ts';
 import {hideElem, loadElem, queryElemChildren, queryElems} from '../utils/dom.ts';
 import {parseDom} from '../utils.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 type ImageContext = {
   imageBefore: HTMLImageElement | undefined,
@@ -101,8 +100,6 @@ class ImageDiff {
     this.containerEl = containerEl;
     containerEl.setAttribute('data-image-diff-loaded', 'true');
 
-    fomanticQuery(containerEl).find('.ui.menu.tabular .item').tab();
-
     // the container may be hidden by "viewed" checkbox, so use the parent's width for reference
     this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box')!.clientWidth - 300, 100);
 

web_src/js/features/repo-branch.ts

@@ -1,5 +1,5 @@
 import {toggleElem} from '../utils/dom.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {showFomanticModal} from '../modules/fomantic/modal.ts';
 
 export function initRepoBranchButton() {
   initRepoCreateBranchButton();
@@ -18,7 +18,7 @@ function initRepoCreateBranchButton() {
       const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
       document.querySelector(fromSpanName)!.textContent = el.getAttribute('data-branch-from');
 
-      fomanticQuery(el.getAttribute('data-modal')!).modal('show');
+      showFomanticModal(document.querySelector(el.getAttribute('data-modal')!));
     });
   }
 }

web_src/js/features/repo-editor.ts

@@ -9,13 +9,11 @@ import {applyAreYouSure, ignoreAreYouSure} from '../vendor/jquery.are-you-sure.t
 import {submitFormFetchAction} from './common-fetch-action.ts';
 import {dirname} from '../utils.ts';
 import {pathEscapeSegments} from '../utils/url.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {showErrorToast} from '../modules/toast.ts';
 
 function initEditPreviewTab(elForm: HTMLFormElement) {
   const elTabMenu = elForm.querySelector('.repo-editor-menu');
   if (!elTabMenu) return;
-  fomanticQuery(elTabMenu.querySelectorAll('.item')).tab();
 
   const elTreePath = elForm.querySelector<HTMLInputElement>('input#tree_path');
   const elTextarea = elForm.querySelector<HTMLTextAreaElement>('.tab[data-tab="write"] textarea');

web_src/js/features/repo-issue-content.ts

@@ -4,6 +4,7 @@ import {GET, POST} from '../modules/fetch.ts';
 import {createElementFromHTML, showElem} from '../utils/dom.ts';
 import {parseIssuePageInfo} from '../utils.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {hideFomanticModal, showFomanticModal} from '../modules/fomantic/modal.ts';
 
 let i18nTextEdited: string;
 let i18nTextOptions: string;
@@ -28,7 +29,6 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
 </div>`);
   document.body.append(elDetailDialog);
   const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options')!;
-  const $fomanticDialog = fomanticQuery(elDetailDialog);
   const $fomanticDropdownOptions = fomanticQuery(elOptionsDropdown);
   $fomanticDropdownOptions.dropdown({
     showOnFocus: false,
@@ -46,7 +46,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
             const resp = await response.json();
 
             if (resp.ok) {
-              $fomanticDialog.modal('hide');
+              hideFomanticModal(elDetailDialog);
             } else {
               showErrorToast(resp.message);
             }
@@ -63,7 +63,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
       $fomanticDropdownOptions.dropdown('clear', true);
     },
   });
-  $fomanticDialog.modal({
+  showFomanticModal(elDetailDialog, {
     async onShow() {
       try {
         const params = new URLSearchParams();
@@ -86,9 +86,9 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
       }
     },
     onHidden() {
-      $fomanticDialog.remove();
+      elDetailDialog.remove();
     },
-  }).modal('show');
+  });
 }
 
 function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {

web_src/js/features/repo-issue.ts

@@ -16,6 +16,7 @@ import {GET, POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {showFomanticModal} from '../modules/fomantic/modal.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 
@@ -335,7 +336,7 @@ export function initRepoIssueReferenceIssue() {
     const modal = document.querySelector(modalSelector)!;
     const textarea = modal.querySelector<HTMLTextAreaElement>('textarea[name="content"]')!;
     textarea.value = `${content}\n\n_Originally posted by @${poster} in ${reference}_`;
-    fomanticQuery(modal).modal('show');
+    showFomanticModal(modal);
   });
 }
 

web_src/js/features/repo-projects.ts

@@ -1,7 +1,7 @@
 import {contrastColor} from '../utils/color.ts';
 import {createSortable} from '../modules/sortable.ts';
 import {POST, request} from '../modules/fetch.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {hideFomanticModal} from '../modules/fomantic/modal.ts';
 import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
 import type {SortableEvent} from 'sortablejs';
 import {toggleFullScreen} from '../utils.ts';
@@ -138,7 +138,7 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
         queryElemChildren(elBoardColumn, '.divider', (divider: HTMLElement) => divider.style.removeProperty('color'));
       }
 
-      fomanticQuery(elModal).modal('hide');
+      hideFomanticModal(elModal);
     } finally {
       elForm.classList.remove('is-loading');
     }

web_src/js/features/repo-release.ts

@@ -3,6 +3,7 @@ import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
 import {getComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
 import {hideElem} from '../utils/dom.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {hideFomanticModal, showFomanticModal} from '../modules/fomantic/modal.ts';
 import {registerGlobalEventFunc, registerGlobalInitFunc} from '../modules/observer.ts';
 import {htmlEscape} from '../utils/html.ts';
 import {compareVersions} from 'compare-versions';
@@ -112,7 +113,7 @@ function initGenerateReleaseNotes(elForm: HTMLFormElement) {
       }
     } finally {
       elModal.classList.remove('loading', 'disabled');
-      fomanticQuery(elModal).modal('hide');
+      hideFomanticModal(elModal);
       comboEditor.focus();
     }
   };
@@ -139,12 +140,12 @@ function initGenerateReleaseNotes(elForm: HTMLFormElement) {
     }
     $dropdown.dropdown('set selected', guessPreviousReleaseTag(tagName, existingTags));
 
-    fomanticQuery(elModal).modal({
+    showFomanticModal(elModal, {
       onApprove: () => {
         doSubmit(tagName); // don't await, need to return false to keep the modal
         return false;
       },
-    }).modal('show');
+    });
   };
 
   buttonShowModal.addEventListener('click', doShowModal);

web_src/js/modules/devtest.ts

@@ -1,7 +1,7 @@
 import {showInfoToast, showWarningToast, showErrorToast} from './toast.ts';
 import type {Toast} from './toast.ts';
 import {registerGlobalInitFunc} from './observer.ts';
-import {fomanticQuery} from './fomantic/base.ts';
+import {showFomanticModal} from './fomantic/modal.ts';
 import {createElementFromHTML} from '../utils/dom.ts';
 import {html} from '../utils/html.ts';
 import {showGlobalErrorMessage} from './errors.ts';
@@ -25,7 +25,7 @@ function initDevtestPage() {
   if (modalButtons) {
     for (const el of document.querySelectorAll('.ui.modal:not([data-skip-button])')) {
       const btn = createElementFromHTML(html`<button class="ui button">${el.id}</button`);
-      btn.addEventListener('click', () => fomanticQuery(el).modal('show'));
+      btn.addEventListener('click', () => showFomanticModal(el));
       modalButtons.append(btn);
     }
   }

web_src/js/modules/fomantic.ts

@@ -1,11 +1,8 @@
-import {initAriaCheckboxPatch} from './fomantic/checkbox.ts';
-import {initAriaFormFieldPatch} from './fomantic/form.ts';
 import {initAriaDropdownPatch} from './fomantic/dropdown.ts';
 import {initAriaModalPatch} from './fomantic/modal.ts';
 import {initFomanticTransition} from './fomantic/transition.ts';
 import {initFomanticDimmer} from './fomantic/dimmer.ts';
 import {svg} from '../svg.ts';
-import {initFomanticTab} from './fomantic/tab.ts';
 
 export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
 
@@ -24,11 +21,8 @@ export function initGiteaFomantic() {
 
   initFomanticTransition();
   initFomanticDimmer();
-  initFomanticTab();
 
   // 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();
-  initAriaFormFieldPatch();
   initAriaDropdownPatch();
   initAriaModalPatch();
 }

web_src/js/modules/fomantic/aria.md

@@ -50,7 +50,7 @@ However, the templates still have the Fomantic-style HTML layout:
 </div>
 ```
 
-We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the
+We call `initAriaLabels` to link the `input` and `label` which makes clicking the
 label etc. work. There is still a problem: These checkboxes are not friendly to screen readers,
 so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty,
 then the checkbox needs to get the `aria-label` attribute manually.

web_src/js/modules/fomantic/base.ts

@@ -1,6 +1,6 @@
-import {generateElemId} from '../../utils/dom.ts';
+import {generateElemId, queryElems} from '../../utils/dom.ts';
 
-export function linkLabelAndInput(label: Element, input: Element) {
+function linkLabelAndInput(label: Element, input: Element) {
   const labelFor = label.getAttribute('for');
   const inputId = input.getAttribute('id');
 
@@ -13,6 +13,34 @@ export function linkLabelAndInput(label: Element, input: Element) {
   }
 }
 
+function patchLabels(parent: ParentNode, containerSelector: string, labelSelector: string, inputSelector: string, marker: string) {
+  // Sample layout for this function:
+  // <div parent>
+  //   <div container><label/><input/></div>
+  //   <div container><label/><input/></div>
+  // </div>
+  //
+  // OR the parent is also the container:
+  // <div parent container><label/><input/></div>
+
+  const patchLabelContainer = (container: Element) => {
+    if (container.hasAttribute(marker)) return;
+    const label = container.querySelector(labelSelector);
+    const input = container.querySelector(inputSelector);
+    if (!label || !input) return;
+    linkLabelAndInput(label, input);
+    container.setAttribute(marker, 'true');
+  };
+  queryElems(parent, containerSelector, patchLabelContainer);
+  if (parent instanceof Element && parent.matches(containerSelector)) patchLabelContainer(parent);
+}
+
+// link labels and inputs in `.ui.checkbox` and `.ui.form .field` so labels are clickable and accessible
+export function initAriaLabels(container: ParentNode) {
+  patchLabels(container, '.ui.checkbox', 'label', 'input', 'data-checkbox-patched');
+  patchLabels(container, '.ui.form .field', ':scope > label', ':scope > input, :scope > select', 'data-field-patched');
+}
+
 export function fomanticQuery(s: string | Element | NodeListOf<Element>): ReturnType<typeof $> {
   // intentionally make it only work for query selector, it isn't used for creating HTML elements (for safety)
   return typeof s === 'string' ? $(document).find(s) : $(s);

web_src/js/modules/fomantic/checkbox.ts

@@ -1,13 +0,0 @@
-import {linkLabelAndInput} from './base.ts';
-
-export function initAriaCheckboxPatch() {
-  // link the label and the input element so it's clickable and accessible
-  for (const el of document.querySelectorAll('.ui.checkbox')) {
-    if (el.hasAttribute('data-checkbox-patched')) continue;
-    const label = el.querySelector('label');
-    const input = el.querySelector('input');
-    if (!label || !input) continue;
-    linkLabelAndInput(label, input);
-    el.setAttribute('data-checkbox-patched', 'true');
-  }
-}

web_src/js/modules/fomantic/form.ts

@@ -1,13 +0,0 @@
-import {linkLabelAndInput} from './base.ts';
-
-export function initAriaFormFieldPatch() {
-  // link the label and the input element so it's clickable and accessible
-  for (const el of document.querySelectorAll('.ui.form .field')) {
-    if (el.hasAttribute('data-field-patched')) continue;
-    const label = el.querySelector(':scope > label');
-    const input = el.querySelector(':scope > input, :scope > select');
-    if (!label || !input) continue;
-    linkLabelAndInput(label, input);
-    el.setAttribute('data-field-patched', 'true');
-  }
-}

web_src/js/modules/fomantic/modal.ts

@@ -2,6 +2,27 @@ import type {FomanticInitFunction} from '../../types.ts';
 import {queryElems} from '../../utils/dom.ts';
 import {hideToastsFrom} from '../toast.ts';
 
+type ModalOpts = {
+  closable?: boolean;
+  onApprove?: (this: HTMLElement) => boolean | void;
+  onShow?: (this: HTMLElement) => void | Promise<void>;
+  onHide?: (this: HTMLElement) => void;
+  onHidden?: (this: HTMLElement) => void;
+};
+
+// thin wrapper around Fomantic's jQuery modal plugin so callers don't have to touch jQuery or fomanticQuery
+export function showFomanticModal(el: Element | null, opts: ModalOpts = {}) {
+  if (!el) return;
+  const $el = $(el);
+  if (Object.keys(opts).length) $el.modal(opts);
+  $el.modal('show');
+}
+
+export function hideFomanticModal(el: Element | null) {
+  if (!el) return;
+  $(el).modal('hide');
+}
+
 const fomanticModalFn = $.fn.modal;
 
 // use our own `$.fn.modal` to patch Fomantic's modal module

web_src/js/modules/fomantic/tab.ts

@@ -1,18 +1,18 @@
 import {queryElemSiblings} from '../../utils/dom.ts';
 
-export function initFomanticTab() {
+export function initTabSwitcher(tabItemContainer: Element) {
-  $.fn.tab = function (this: any) {
+  // Clicking a `.item[data-tab]` menu item activates the matching `.ui.tab[data-tab=...]` panel
-    for (const elBtn of this) {
+  // This design is from Fomantic UI, and it has problems like :
-      const tabName = elBtn.getAttribute('data-tab');
+  // * The panel selector is global, callers should make sure the "data-tab" values don't conflict on the same page
-      if (!tabName) continue;
+  const tabItems = tabItemContainer.querySelectorAll('.item[data-tab]');
-      elBtn.addEventListener('click', () => {
+  for (const elItem of tabItems) {
-        const elTab = document.querySelector(`.ui.tab[data-tab="${tabName}"]`)!;
+    const tabName = elItem.getAttribute('data-tab')!;
-        queryElemSiblings(elTab, `.ui.tab`, (el) => el.classList.remove('active'));
+    elItem.addEventListener('click', () => {
-        queryElemSiblings(elBtn, `[data-tab]`, (el) => el.classList.remove('active'));
+      const elPanel = document.querySelector(`.ui.tab[data-tab="${tabName}"]`)!;
-        elBtn.classList.add('active');
+      queryElemSiblings(elPanel, '.ui.tab', (el) => el.classList.remove('active'));
-        elTab.classList.add('active');
+      queryElemSiblings(elItem, '.item[data-tab]', (el) => el.classList.remove('active'));
-      });
+      elItem.classList.add('active');
-    }
+      elPanel.classList.add('active');
-    return this;
+    });
-  };
+  }
 }

web_src/js/modules/observer.ts

@@ -1,17 +1,18 @@
 import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
 import type {Promisable} from '../types.ts';
 import type {InitPerformanceTracer} from './init.ts';
+import {initAriaLabels} from './fomantic/base.ts';
 
 let globalSelectorObserverInited = false;
 
-type SelectorHandler = {selector: string, handler: (el: HTMLElement) => void};
+type SelectorHandler<T extends Element> = {selector: string, handler: (el: T) => void};
-const selectorHandlers: SelectorHandler[] = [];
+const selectorHandlers: SelectorHandler<Element>[] = [];
 
 type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => Promisable<void>;
 const globalEventFuncs: Record<string, GlobalEventFunc<HTMLElement, Event>> = {};
 
-type GlobalInitFunc<T extends HTMLElement> = (el: T) => Promisable<void>;
+type GlobalInitFunc<T extends Element> = (el: T) => Promisable<void>;
-const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
+const globalInitFuncs: Record<string, GlobalInitFunc<Element>> = {};
 
 // It handles the global events for all `<div data-global-click="onSomeElemClick"></div>` elements.
 export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(event: string, name: string, func: GlobalEventFunc<T, E>) {
@@ -23,32 +24,32 @@ export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(
 // ATTENTION: For most cases, it's recommended to use registerGlobalInitFunc instead,
 // Because this selector-based approach is less efficient and less maintainable.
 // But if there are already a lot of elements on many pages, this selector-based approach is more convenient for exiting code.
-export function registerGlobalSelectorFunc(selector: string, handler: (el: HTMLElement) => void) {
+export function registerGlobalSelectorFunc<T extends Element>(selector: string, handler: (el: T) => void) {
-  selectorHandlers.push({selector, handler});
+  selectorHandlers.push({selector, handler: handler as (el: Element) => void});
   // Then initAddedElementObserver will call this handler for all existing elements after all handlers are added.
   // This approach makes the init stage only need to do one "querySelectorAll".
   if (!globalSelectorObserverInited) return;
-  for (const el of document.querySelectorAll<HTMLElement>(selector)) {
+  for (const el of document.querySelectorAll<T>(selector)) {
     handler(el);
   }
 }
 
 // It handles the global init functions for all `<div data-global-int="initSomeElem"></div>` elements.
 export function registerGlobalInitFunc<T extends HTMLElement>(name: string, handler: GlobalInitFunc<T>) {
-  globalInitFuncs[name] = handler as GlobalInitFunc<HTMLElement>;
+  globalInitFuncs[name] = handler as GlobalInitFunc<Element>;
   // The "global init" functions are managed internally and called by callGlobalInitFunc
   // They must be ready before initGlobalSelectorObserver is called.
   if (globalSelectorObserverInited) throw new Error('registerGlobalInitFunc() must be called before initGlobalSelectorObserver()');
 }
 
-function callGlobalInitFunc(el: HTMLElement) {
+function callGlobalInitFunc(el: Element) {
   // TODO: GLOBAL-INIT-MULTIPLE-FUNCTIONS: maybe in the future we need to extend it to support multiple functions, for example: `data-global-init="func1 func2 func3"`
   const initFunc = el.getAttribute('data-global-init')!;
   const func = globalInitFuncs[initFunc];
   if (!func) throw new Error(`Global init function "${initFunc}" not found`);
 
   // when an element node is removed and added again, it should not be re-initialized again.
-  type GiteaGlobalInitElement = Partial<HTMLElement> & {_giteaGlobalInited: boolean};
+  type GiteaGlobalInitElement = Partial<Element> & {_giteaGlobalInited: boolean};
   if ((el as GiteaGlobalInitElement)._giteaGlobalInited) return;
   (el as GiteaGlobalInitElement)._giteaGlobalInited = true;
 
@@ -80,20 +81,23 @@ export function initGlobalSelectorObserver(perfTracer: InitPerformanceTracer | n
       const mutation = mutationList[i];
       const len = mutation.addedNodes.length;
       for (let i = 0; i < len; i++) {
-        const addedNode = mutation.addedNodes[i] as HTMLElement;
+        const addedNode = mutation.addedNodes[i] as ParentNode;
         if (!isDocumentFragmentOrElementNode(addedNode)) continue;
 
+        initAriaLabels(addedNode);
         for (const {selector, handler} of selectorHandlers) {
-          if (addedNode.matches(selector)) {
+          if ((addedNode instanceof Element) && addedNode.matches(selector)) {
             handler(addedNode);
           }
-          for (const el of addedNode.querySelectorAll<HTMLElement>(selector)) {
+          for (const el of addedNode.querySelectorAll?.<HTMLElement>(selector) ?? []) {
             handler(el);
           }
         }
       }
     }
   });
+
+  initAriaLabels(document);
   if (perfTracer) {
     for (const {selector, handler} of selectorHandlers) {
       perfTracer.recordCall(`initGlobalSelectorObserver ${selector}`, () => {