From 4e86728a0316cc494e46a75526b1e60e01a97f6f Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 18 Jan 2024 15:08:41 +0100
Subject: [PATCH] Permet le click sur toute la carte d'une combinaison
 d'environnements (#611)

* allow click on whole combination card in a11y statement

* remove test css props
---
 .../audit/AuditEnvironmentCheckbox.vue          | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/confiture-web-app/src/components/audit/AuditEnvironmentCheckbox.vue b/confiture-web-app/src/components/audit/AuditEnvironmentCheckbox.vue
index c8274c85..86b7e557 100644
--- a/confiture-web-app/src/components/audit/AuditEnvironmentCheckbox.vue
+++ b/confiture-web-app/src/components/audit/AuditEnvironmentCheckbox.vue
@@ -29,6 +29,8 @@ function onInput() {
 
 <template>
   <div class="fr-p-3w container">
+    <!-- Allow click on the whole radio square -->
+    <div class="container-layer" @click="onInput" />
     <p
       v-if="platform === Platform.DESKTOP"
       class="fr-badge fr-badge--sm fr-badge--purple-glycine fr-mb-1w"
@@ -55,7 +57,7 @@ function onInput() {
     </div>
 
     <div
-      class="fr-table fr-table--bordered fr-table--layout-fixed fr-table--no-caption fr-mb-0"
+      class="fr-table fr-table--bordered fr-table--layout-fixed fr-table--no-caption fr-mb-0 combination-table"
     >
       <table :id="slugify(`combinations-table-${title}-${platform}`)">
         <caption>
@@ -84,7 +86,20 @@ function onInput() {
 <style scoped>
 .container {
   border: 1px solid var(--border-default-grey);
+  position: relative;
 }
+
+.container-layer {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+/* Override position to allow click on whole card */
+.combination-table {
+  position: initial;
+}
+
 .label::before {
   /* Align radio to label. This label size for radio does not exist in DSFR. */
   margin-top: 0.25rem !important;