d573c22a98
Backport #30195 by @silverwind Fix https://github.com/go-gitea/gitea/issues/30185, regression from https://github.com/go-gitea/gitea/pull/30162. The checkboxes were unclickable because the label was positioned over the checkbox with `padding`. Now it uses `margin` so the checkbox itself will be clickable in all cases. Secondly, I changed the for/id linking to also add missing `for` attributes when `id` is present. The other way around (only `for` present) is currently not handled and I think there are likey no occurences in the code and introducing new non-generated `id`s might cause problems elsewhere if we do, so I skipped on that. Co-authored-by: silverwind <me@silverwind.io> (cherry picked from commit 9d38c4d60ef5bd015e1430386e38d9f32e050f8f)
24 lines
870 B
JavaScript
24 lines
870 B
JavaScript
import {generateAriaId} from './base.js';
|
|
|
|
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;
|
|
const inputId = input.getAttribute('id');
|
|
const labelFor = label.getAttribute('for');
|
|
|
|
if (inputId && !labelFor) { // missing "for"
|
|
label.setAttribute('for', inputId);
|
|
} else if (!inputId && !labelFor) { // missing both "id" and "for"
|
|
const id = generateAriaId();
|
|
input.setAttribute('id', id);
|
|
label.setAttribute('for', id);
|
|
} else {
|
|
continue;
|
|
}
|
|
el.setAttribute('data-checkbox-patched', 'true');
|
|
}
|
|
}
|