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>
This commit is contained in:
silverwind
2026-04-24 10:02:37 +02:00
committed by GitHub
parent 0817a405af
commit 3816210c05
28 changed files with 135 additions and 122 deletions
+30 -2
View File
@@ -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);