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>

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

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};
-const selectorHandlers: SelectorHandler[] = [];
+type SelectorHandler<T extends Element> = {selector: string, handler: (el: T) => void};
+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>;
-const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
+type GlobalInitFunc<T extends Element> = (el: T) => Promisable<void>;
+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) {
-  selectorHandlers.push({selector, handler});
+export function registerGlobalSelectorFunc<T extends Element>(selector: string, handler: (el: T) => void) {
+  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}`, () => {