Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix unclickable checkboxes (#30195) 

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.
This commit is contained in:
silverwind 2024-03-31 01:00:58 +01:00 committed by GitHub
parent 72a5d3faa8
commit 640850e15f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/css/modules/checkbox.css
View File

@ -41,7 +41,7 @@ input[type="radio"] {
.ui.checkbox label, .ui.checkbox label,
.ui.radio.checkbox label { .ui.radio.checkbox label {
padding-left: 1.85714em; margin-left: 1.85714em;
} }
.ui.checkbox + label { .ui.checkbox + label {

17
web_src/js/modules/fomantic/checkbox.js
View File

@ -6,10 +6,19 @@ export function initAriaCheckboxPatch() {
if (el.hasAttribute('data-checkbox-patched')) continue; if (el.hasAttribute('data-checkbox-patched')) continue;
const label = el.querySelector('label'); const label = el.querySelector('label');
const input = el.querySelector('input'); const input = el.querySelector('input');
if (!label || !input || input.getAttribute('id') || label.getAttribute('for')) continue; if (!label || !input) continue;
const id = generateAriaId(); const inputId = input.getAttribute('id');
input.setAttribute('id', id); const labelFor = label.getAttribute('for');
label.setAttribute('for', id);
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'); el.setAttribute('data-checkbox-patched', 'true');
} }
} }