DurableObject aria-disabled
A HTMX extension that adds aria-disabled to elements during requests.
Show Code
htmx.defineExtension("aria-disabled", {
// TODO: These types shouldn't be needed once HTMX publishes dist/htmx.d.ts
// https://github.com/bigskysoftware/htmx/issues/2629
onEvent(name: string, event: CustomEvent) {
switch (name) {
case "htmx:beforeRequest": {
const target = event.target as HTMLElement;
if (!target?.getAttribute) return;
const attrTarget = target.getAttribute("hx-aria-disabled");
if (!attrTarget) return;
const internalData = getInternalData(target);
const disabledCount = (internalData.disabledCount =
(internalData.disabledCount || 0) + 1);
internalData.disabled = internalData.disabled ?? new Set();
if (attrTarget === "this") {
internalData.disabled.add(target);
} else {
const result = querySelectorAllExt(target, attrTarget);
if (result.length === 0) {
console.error(
`The selector "${attrTarget}" on hx-aria-disabled returned no matches!`,
);
} else {
for (const r of result) {
internalData.disabled.add(r);
}
}
}
for (const elt of internalData.disabled) {
if (elt) {
elt.setAttribute("aria-disabled", "true");
}
}
event.detail.xhr.addEventListener("loadend", () => {
if (disabledCount === internalData.disabledCount) {
for (const elt of internalData.disabled) {
if (elt) {
elt.removeAttribute("aria-disabled");
}
}
}
});
break;
}
}
},
});