From 9d38c4d60ef5bd015e1430386e38d9f32e050f8f Mon Sep 17 00:00:00 2001 From: Giteabot Date: Sun, 31 Mar 2024 08:05:52 +0800 Subject: [PATCH] Fix unclickable checkboxes (#30195) (#30199) 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 --- web_src/css/modules/checkbox.css | 2 +- web_src/js/modules/fomantic/checkbox.js | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css index fc44a7c115..9238e0b3f3 100644 --- a/web_src/css/modules/checkbox.css +++ b/web_src/css/modules/checkbox.css @@ -41,7 +41,7 @@ input[type="radio"] { .ui.checkbox label, .ui.radio.checkbox label { - padding-left: 1.85714em; + margin-left: 1.85714em; } .ui.checkbox + label { diff --git a/web_src/js/modules/fomantic/checkbox.js b/web_src/js/modules/fomantic/checkbox.js index ffe853b28f..7f2b340296 100644 --- a/web_src/js/modules/fomantic/checkbox.js +++ b/web_src/js/modules/fomantic/checkbox.js @@ -6,10 +6,19 @@ export function initAriaCheckboxPatch() { 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); + 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'); } }