From 6aeccfbefc1ac2b90c68d7d98ca4f3345d3df419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Lef=C3=A8vre=20=28lul=29?= <lul@odoo.com>
Date: Mon, 2 Dec 2024 16:11:38 +0100
Subject: [PATCH] [IMP] components: clickable pointer on checkbox label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This changes the mouse pointer when hovering a checkbox label.
It indicates that it's clickable.

Task: 4358098
Part-of: odoo/o-spreadsheet#5287
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>
---
 src/components/side_panel/components/checkbox/checkbox.ts       | 1 +
 src/components/side_panel/components/checkbox/checkbox.xml      | 1 +
 .../__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap     | 2 ++
 .../building_blocks/__snapshots__/label_range.test.ts.snap      | 1 +
 .../side_panels/components/__snapshots__/checkbox.test.ts.snap  | 1 +
 5 files changed, 6 insertions(+)

diff --git a/src/components/side_panel/components/checkbox/checkbox.ts b/src/components/side_panel/components/checkbox/checkbox.ts
index 4dc68127ee..249a540da3 100644
--- a/src/components/side_panel/components/checkbox/checkbox.ts
+++ b/src/components/side_panel/components/checkbox/checkbox.ts
@@ -34,6 +34,7 @@ css/* scss */ `
       box-sizing: border-box;
       outline: none;
       border: 1px solid ${GRAY_300};
+      cursor: pointer;
 
       &:hover {
         border-color: ${ACTION_COLOR};
diff --git a/src/components/side_panel/components/checkbox/checkbox.xml b/src/components/side_panel/components/checkbox/checkbox.xml
index 4727554844..3519a4ff77 100644
--- a/src/components/side_panel/components/checkbox/checkbox.xml
+++ b/src/components/side_panel/components/checkbox/checkbox.xml
@@ -2,6 +2,7 @@
   <t t-name="o-spreadsheet.Checkbox">
     <label
       class="o-checkbox d-flex align-items-center"
+      role="button"
       t-att-title="props.title"
       t-att-class="{'text-muted': props.disabled }"
       t-attf-class="{{props.className}}">
diff --git a/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap b/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap
index 498bc664f9..d6a7fa5ded 100644
--- a/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap
+++ b/tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap
@@ -195,6 +195,7 @@ exports[`Spreadsheet pivot side panel It should correctly be displayed 1`] = `
           
           <label
             class="o-checkbox d-flex align-items-center"
+            role="button"
             title="Changing the pivot definition requires to reload the data. It may take some time."
           >
             <input
@@ -395,6 +396,7 @@ exports[`Spreadsheet pivot side panel It should display only the selection input
           
           <label
             class="o-checkbox d-flex align-items-center"
+            role="button"
             title="Changing the pivot definition requires to reload the data. It may take some time."
           >
             <input
diff --git a/tests/side_panels/building_blocks/__snapshots__/label_range.test.ts.snap b/tests/side_panels/building_blocks/__snapshots__/label_range.test.ts.snap
index 9eaa90800a..0a8dfe9c0c 100644
--- a/tests/side_panels/building_blocks/__snapshots__/label_range.test.ts.snap
+++ b/tests/side_panels/building_blocks/__snapshots__/label_range.test.ts.snap
@@ -44,6 +44,7 @@ exports[`Label range Can add options to the label range component 1`] = `
     </div>
     <label
       class="o-checkbox d-flex align-items-center mt-2"
+      role="button"
     >
       <input
         class="me-2"
diff --git a/tests/side_panels/components/__snapshots__/checkbox.test.ts.snap b/tests/side_panels/components/__snapshots__/checkbox.test.ts.snap
index 69bc78aac3..b32e2595d4 100644
--- a/tests/side_panels/components/__snapshots__/checkbox.test.ts.snap
+++ b/tests/side_panels/components/__snapshots__/checkbox.test.ts.snap
@@ -4,6 +4,7 @@ exports[`Checkbox Can render a checkbox 1`] = `
 <div>
   <label
     class="o-checkbox d-flex align-items-center"
+    role="button"
   >
     <input
       class="me-2"