kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): scope checkbox hit-area pseudo to the task row 

The pseudo-element that extends the checkbox hit target also covered
label text content, which broke Playwright actionability checks for
clicks on text inside wider FancyCheckbox labels (e.g. the "Show
Archived" toggle on the projects list page).

Move the rule out of BaseCheckbox and into SingleTaskInProject's deep
override, where the label slot is already hidden via display: none, so
no neighboring content can be intercepted.
This commit is contained in:
kolaente 2026-05-05 17:21:50 +02:00 committed by kolaente
parent 9bea92bb6f
commit 3d594db725
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/base/BaseCheckbox.vue
View File

@ -40,20 +40,6 @@ const emit = defineEmits<{
user-select: none;
-webkit-tap-highlight-color: transparent;
display: inline-flex;
position: relative;
}
// Extend the hit target to >=44x44 without affecting layout (WCAG 2.5.5).
.base-checkbox__label::before {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
min-block-size: 44px;
min-inline-size: 44px;
block-size: 100%;
inline-size: 100%;
transform: translate(-50%, -50%);
}
.base-checkbox:has(input:disabled) .base-checkbox__label {

17
frontend/src/components/tasks/partials/SingleTaskInProject.vue
View File

@ -536,6 +536,23 @@ defineExpose({
span {
display: none;
}
// Extend the hit target to >=44x44 without affecting layout (WCAG 2.5.5).
.base-checkbox__label {
position: relative;
&::before {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
min-block-size: 44px;
min-inline-size: 44px;
block-size: 100%;
inline-size: 100%;
transform: translate(-50%, -50%);
}
}
}
.tasktext.done {