Increase click area of checkbox
Wrap inside a label which has a padding and negative margin to
balance the spacing out.
Release-Notes: skip
Google-bug-id: b/238175667
Change-Id: I3623f58ea0aa4be19b925811932f4713810cb524
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
index bf04808..3a18095 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
@@ -253,6 +253,10 @@
.cell.selection input {
vertical-align: middle;
}
+ .selectionLabel {
+ padding: 10px;
+ margin: -10px;
+ }
.cell.label {
font-weight: var(--font-weight-normal);
}
@@ -302,11 +306,13 @@
update the current checked state.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-checked
-->
- <input
- type="checkbox"
- .checked=${this.checked}
- @click=${() => this.toggleCheckbox()}
- />
+ <label class="selectionLabel">
+ <input
+ type="checkbox"
+ .checked=${this.checked}
+ @click=${() => this.toggleCheckbox()}
+ />
+ </label>
</td>
`;
}
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_test.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_test.ts
index fb45c40..91844e1 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_test.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_test.ts
@@ -121,7 +121,7 @@
const checkbox = queryAndAssert<HTMLInputElement>(
element,
- '.selection > input'
+ '.selection > label > input'
);
tap(checkbox);
let selectedChangeNums = await waitUntilObserved(
@@ -156,7 +156,7 @@
const checkbox = queryAndAssert<HTMLInputElement>(
element,
- '.selection > input'
+ '.selection > label > input'
);
assert.isTrue(checkbox.checked);
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view_test.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view_test.ts
index c19ee11..7ff5866 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view_test.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view_test.ts
@@ -65,7 +65,7 @@
query(query(element, 'gr-change-list'), 'gr-change-list-section'),
'gr-change-list-item'
),
- '.selection > input'
+ '.selection > label > input'
);
tap(checkbox);
await waitUntil(() => checkbox.checked);
@@ -80,7 +80,7 @@
query(query(element, 'gr-change-list'), 'gr-change-list-section'),
'gr-change-list-item'
),
- '.selection > input'
+ '.selection > label > input'
);
assert.isTrue(checkbox.checked);
});
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.ts b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.ts
index 29c3751..339bfd3 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.ts
@@ -91,7 +91,7 @@
query(query(element, 'gr-change-list'), 'gr-change-list-section'),
'gr-change-list-item'
),
- '.selection > input'
+ '.selection > label > input'
);
MockInteractions.tap(checkbox);
await waitUntil(() => checkbox.checked);
