66f9a4ee68
CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on admin page also still work. The only necessary JS is the one that links `input` and `label` so that it can be toggled via label. All checkboxes except the markdown ones render at `--checkbox-size: 16px` now. <img width="174" alt="Screenshot 2024-03-28 at 22 15 10" src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db"> <img width="499" alt="Screenshot 2024-03-28 at 21 00 07" src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce"> <img width="83" alt="Screenshot 2024-03-28 at 22 14 34" src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474"> --------- Co-authored-by: delvh <dev.lh@web.de> (cherry picked from commit 8fd15990c5c8980caf2b9ffefc0b3427efacdc04)
15 lines
629 B
JavaScript
15 lines
629 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 || input.getAttribute('id') || label.getAttribute('for')) continue;
|
|
const id = generateAriaId();
|
|
input.setAttribute('id', id);
|
|
label.setAttribute('for', id);
|
|
el.setAttribute('data-checkbox-patched', 'true');
|
|
}
|
|
}
|